[ CSS ] 속성 ( margin )

들어가기

margin은 border 영역으로 다른 요소와 구별하기 위해 쓰이는 빈 영역이다.

즉, 이 말은 다른 요소와의 간격을 만들 수 있다는 것이다.

---

📌 margin 속성

: 기본 값 = 0

 

< 속성 값 >

length	고정값으로 지정한다. ( ex, px, em ... )
percent	요소의 width에 상대적인 크기를 지정한다.
auto	브라우저에 의해 계산된 값이 적용된다.
margin-top	border 영역의 위쪽 여백을 지정한다.
margin-right	border 영역의 오른쪽 여백을 지정한다.
margin-bottom	border 영역의 아래쪽 여백을 지정한다.
margin-left	border 영역의 왼쪽 여백을 지정한다.

---

🤍 margin 축약

margin: [-top] [-right] [-bottom] [-left];
           0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
           0      10px     20px             /* 좌, 우 같음 */
           0      10px                      /* 상, 하 같음 & 좌, 우 같음 */
           0                                /* 상, 우, 하, 좌 모두 같음 */

padding과 마찬가지로 축약하여 사용할 수 있고, 상하좌우에 대해서 값이 같으면 하나로 합하여 사용할 수 있다.

margin에서는 수치 이외에 사용할 수 있는 auto 값이 있다.

 

- margin auto

: 기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0 (기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가진다.

이를 활용하여 수평 중앙 정렬을 할 수 있다. 

margin-left: auto;
margin-right: auto;

좌우의 margin이 모두 auto로 적용되었다면, 브라우저는 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할하여 적용한다.

이에 따라 요소는 수평 중앙 정렬이 된다. 상하의 경우 수직 중앙 정렬이 되지 않는다.

---

🤍 margin collapse ( 마진 병합 )

: 인접한 두 개 이상의 수직 방향 박스의 margin이 하나로 합쳐지는 것을 의미한다.

 

  마진 병합은 다음 세가지의 경우에 일어난다.

1. 두 요소가 상하로 인접한 경우 : 위 요소의 하단 margin과 아래 요소의 margin의 병합이 일어난다.

2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소

2-1. 부모 요소의 상단 margin과 첫 번째 자식 요소의 상단 margin 병합이 일어난다.

2-2.  부모 요소의 하단 margin과 마지막 자식 요소의 하단 margin 병합이 일어난다.

3. 내용이 없는 빈 요소의 경우 : 해당 요소의 상단 마진과 하단 마진의 병합이 일어난다.

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다.

마진 병합은 margin이 반드시 맞닿아야 발생하기 때문에  2,3 번째의 경우 padding 및 border가 없어야 한다.

https://www.boostcourse.org/cs120/lecture/92916?isDesc=false

마진 병합을 활용하여 첫 번째와 두 번째 컴포넌트의 조합이 다양한 경우 여백을 다르게 사용할 수 있다.

---

01. https://www.boostcourse.org/속성-margin 설명

비전공자를 위한 HTML/CSS