[CSS] 마진(margin)

1. 마진(margin)

  - 바깥 영역과 테두리 사이의 간격이다.

  - 마진은 눈에 보이지 않는다.

 

2. 마진의 속성

  - 마진의 속성은 패딩(padding)의 속성과 동일하게 top, right, bottom, left 순으로 설정한다.

 

2-1 1개의 margin 속성값을 가질 때

ex) margin: 5px;

=> margin-top: 5px

     margin-right: 5px

     margin-bottom: 5px

     margin-left: 5px

 

2-2 2개의 margin 속성값을 가질 때

ex) margin: 10px 20px;

=> margin-top: 10px

     margin-right: 20px

     margin-bottom: 10px

     margin-left: 20px

 

2-3 3개의 margin 속성값을 가질 때

ex) margin: 10px 20px 30px;

=> margin-top: 10px

     margin-right: 20px

     margin-bottom: 30px

     margin-left: 20px

 

2-4 4개의 margin 속성값을 가질 때

ex) margin: 10px 20px 30px 40px;

=> margin-top: 10px

     margin-right: 20px

     margin-bottom: 30px

     margin-left: 40px

 

3. margin: auto

<style>
    div.a {
        width: 200px; height: 200px;
        border: solid 1px black;
        margin: auto;
        }
</style>

  - margin 속성값을 auto로 입력 시 수평 방향 값을 자동으로 가운데로 설정한다.