margin

• length : 고정값으로 지정합니다. (ex. px, em ....)

• percent : 요소의 width에 상대적인 크기를 지정합니다.

상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 거 같지만 그렇지 않습니다. %는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정 됩니다.

• auto : 브라우저에 의해 계산된 값이 적용 됩니다.

margin auto

기본적으로 브라우저에 의해 계산이 이루어지는데, 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가집니다. 이를 활용하여 수평 중앙 정렬을 할 수 있습니다.

좌우의 margin이 모두 auto로 적용 되었다면, 브라우저는 요소가 가질수 있는 가로 영역에서 자신의 width를 제외한 나머지 여백에 크기에 대해 균등 분할 하여 적용합니다.

이에 따라 요소는 수평 중앙 정렬이 됩니다. 상하의 경우 수직 중앙 정렬이 되지 않으며, 기본적인 플로우를 벗어나는 상황에 대해서 적용이됩니다.

가운데 정렬시 (margin : 0 auto) width 값이 지정되어 있어야 한다.

margin collapse(마진 병합)

마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미합니다.

마진 병합이 다음 세가지의 경우에 일어납니다.

1. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어납니다.
2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소
   • 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어납니다.
   • 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어납니다.
3. 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합이 일어납니다.

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않습니다.
마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 합니다.

width

percent 기준값 : 부모 요소의 width에 상대적인 크기를 지정합니다.

부모가 인라인 레벨 요소일 때, 자식(블록 요소)이 width 값에 %를 가지면, 가장 가까운 블록 레벨인 조상의 width를 기준으로 계산됩니다. 만일 최상단까지 블록 레벨 요소가 없으면 body를 기준으로 계산됩니다.

height

percent 기준값 : Containing Block의 높이에 대한 백분율로 높이를 정의합니다.

여기서 말하는 Containing Block은 부모를 의미한다고 생각하시면 됩니다.

부모가 명시적인 높이 값을 가지고 있지 않으면 자식의 높이를 %값으로 지정해줘도 적용되지 않습니다.