CSS Margins

✔  Margins

• margin-top
• marign-right
• margin-bottom
• margin-left

 

• margin : 상단, 오른쪽, 하단, 왼쪽 ;  -> 4개
• margin : 상단. 오른쪽/왼쪽 , 하단; -> 3개
• margin : 위/아래, 오른쪽/왼쪽 -> 2개

 

• margin: auto;  -> 가로 중앙에 배치

 

• margin-left: inherit;  -> 상속 , 여백 값이 상위요소에서 상속되도록 함

 

✔ CSS Margin Collapse  :: 마진 상쇄

 

• 블록레벨 요소일 경우 적용됨. 
• 마진 값이 0이어도 적용
• 좌우는 상쇄 X 상하만 상쇄 적용 O 

 

• 위아래 margin 값 동일하고, 겹치는 경우 발생 
  겹쳐진 마진 값을 비교해서 큰 값으로 상쇄해서 랜더링 한다.

 

• 높이 없는 (빈요소) 상태의 블록요소
  위 아래 경계가 없어서, 자신의 위 아래 마진 값을 비교해서 더 큰 값으로 상쇄시킨다.

 

• 부모박스와 첫,마지막 자식 박스의 상,하단 마진이 겹칠때.

 

출처 :

CSS Margin Collapse

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해