8-4-4. CSS 속성 : Border의 여백(Margin) {margin-top / right / bottom / left: ... auto ;}

8-4-4. CSS 속성 : Border의 여백(Margin)

 

 가. margin 속성

 

  - 박스모델의 'border 영역'을 다른 요소와 구별하기 위한 'border 영역'의 여백이 margin

  - 이 margin 영역의 크기를 조절하는 속성

  - padding 속성과 사용 방식이 유사하나, 몇 가지의 차이점(속성값 auto, 속성값 음수) 있음

  - 기본값 : 0

 

 나. margin 관련 속성의 종류

  

  ■ margin-top : border 영역의 위쪽 여백의 크기를 지정

  ■ margin-right : border 영역의 오른쪽 여백의 크기를 지정

  ■ margin-bottom : border 영역의 아래쪽 여백의 크기를 지정

  ■ margin-left : border 영역의 왼쪽 여백의 크기를 지정

 

  ▣ 단위 형태의 속성값 : px / em / % ...

   - padding 속성값과 달리 음수 사용가능

   - 구하고자 하는 %의 산출 값은 상하좌우 상관없이, 이를 위한 기준 값은 '무조건' 'width 값'

 

1  div{width: 100px; height: 200px; margin: 10%;}                                     ↓  ※ margin의 산출 값은 10px(= width 100px * 10%)

 

  ▣ 속성값 : auto

   - 브라우저에 의해 계산된 값이 적용

   - 위 속성값을 이용하여 수평 중앙 정렬을 할 수 있음

   - 위 속성값은 가로 영역에서 활용할 수 있음

   - 위 속성값은 세로 영역에서 활용될 수 없어, 수직 중앙 정렬은 불가함

   - padding 속성값에는 없음

 

1 div{margin-top: 20px;]  2 div{margin-left: auto;]    → margin 영역은 왼쪽으로 전부 위치하고, border 영역은 오른쪽에 위치  3 div{margin-right: auto;]  → margin 영역은 오른쪽으로 전부 위치하고, border 영역은 왼쪽에 위치  4 div{margin: auto;]          → border 영역은 정가운데 위치하고, margin 영역은 좌우에 각각 위치  ※ 2, 3번 코드를 같이 선언하면, 4번과 같은 결과가 출력됨

 

다. margin 속성의 축약

 

  - 위 여러 margin 관련 속성을 축약하여 하나의 코드로 입력할 수 있음

  - padding 속성 축약과 동일함

  - 단, 축약시 선언 순서에 맞춰야 함

 

[margin 속성 축약 선언순서]  속성값이 1개인 경우 :  div{margin: [여백 '상하우좌' 값]  속성값이 2개인 경우 :  div{margin: [여백 '상하' 값] [여백 '우좌' 값]  속성값이 3개인 경우 :  div{margin: [여백 '상' 값] [여백 '우좌' 값] [여백 '하' 값]  속성값이 4개인 경우 :  div{margin: [여백 '상' 값] [여백 '우' 값] [여백 '하' 값] [여백 '좌' 값]

 

라-1. margin collapse(마진 병합)

 

  - 마진 병합은 위치상 수직(상하) 방향으로 바로 인접한 각 박스의 마진들이 하나로 합쳐지는 것

  - 마진 병합은 수평(좌우) 방향에서는 이루어질 수 없음

  - 마진 병합시, 병합되는 마진 값 중에서 작은 값과 큰 값 중 큰값으로 병합됨

라-2. margin collapse(마진 병합)이 되는 경우

 

  1) '동등한 위치'의 다른 각 요소 박스가 상하로 인접한 경우

 

    - 먼저 선언된 요소의 bottom margin과 그 다음 선언된 요소의 top margin이 인접할 때

    - 위 2개의 margin이 개별적으로 나타나지 않고, 1개의 margin으로만 나타남

 

[先요소] border	→ margin collapse	[先요소] border
[先요소] margin-bottom: 50px		margin : 50px
[後요소] margin-top : 50px
[後요소] border		[後요소] border

 

  2) 부모요소 박스와 자식요소 박스의 경우

 

    2-1) '부모'요소의 top margin과 자식요소 중 '첫번째 자식'요소의 top margin은 병합됨

 

[부모요소] margin-top : 50px	→ margin collapse	margin-top : 50px
[첫번째 자식요소] margin-top : 50px
[첫번째 자식요소] border		[첫번째 자식요소] border

 

   2-2) '부모'요소의 bottom margin과 자식요소 중 '마지막 자식'요소의 bottom margin은 병합됨

 

[마지막 자식요소] border	→ margin collapse	[마지막 자식요소] border
[마지막 자식요소] margin-bottom : 50px		margin-bottom : 50px
[부모요소] margin-bottom : 50px

 

  3) 내용이 없는 빈요소 박스의 경우

 

    - 내용이 없는 해당 빈요소의 top margin 과 bottom margin이 병합됨

 

[빈요소] margin-top : 50px	→ margin collapse	margin : 50px
내용無
[빈요소] margin-bottom : 50px