CSS란?
CSS는 Cascading Style Sheets의 약자로, 위에서 아래로 흐르는 폭포처럼 스타일이 적용된다.
즉, 우선순위에 따라 스타일이 적용되며, 부모 요소의 스타일은 자식 요소에게 상속된다.
마진 상쇄(margin collapsing) 현상
인접한 두 개 이상의 요소가 block-level일 경우 큰 쪽의 마진만 적용되는 현상을 의미하며, 마진 상쇄는 수직 방향(top, bottom)에서만 발생한다.
마진 상쇄가 발생하는 경우
-
인접 형제
- 후행 형제 요소가 float을 해제해야(clear) 하는 경우 제외
-
부모와 자식 박스
- border, padding, inline 콘텐츠, block formatting context, height 또는 min-height가 존재하면 마진 상쇄 현상이 발생하지 않는다.
- 마진은 부모 요소의 바깥쪽으로 위치하게 된다.
block formatting context란?
요소의 내부와 외부 간의 상호작용을 피하기 위한 일종의 격리다.
어떤 경우가 BFC가 생성되는지 MDN에서 확인해볼 수 있다.
-
빈 요소
- 블록 요소에 내용이 없고, border, padding, height, min-height가 없으면, 상단과 하단 마진 간에 마진 상쇄 현상이 발생한다.
네거티브 마진이 있는 경우
가장 큰 양수 마진과 가장 작은 네커티브 마진을 합산한 값이 적용된다.
모두 네거티브 마진인 경우
가장 작은 네거티브 마진이 적용된다.
컨테이너가 flex 혹은 grid인 경우
마진 상쇄 현상이 발생하지 않는다.
참고 자료
flex는 block-level인가?
