공부를 합니다/웹 (Web)
생활코딩 CSS_9.4 마진 겹침 현상(Margin-collapsing)
야채크래커
2020. 3. 5. 14:02
9.4 마진 겹침 현상 (Margin collapsing)
마진이 특정 값 보다 클 경우 두 요소의 마진 영역이 겹치는 현상
마진 겹침 현상이 발생하는 경우
두 개의 인접한 태그 (sibling) 사이에서 발생
- 두 element의 마진 값 중에 작은 값이 상쇄되어 큰 값이 두 element 사이의 간격이 된다.
<li>등에 margin을 적용시켰을 때 등간격을 유지할 수 있게 해준다.
부모 - 자식 태그 사이에서 발생
- 부모 태그의 시각적 효과를 주는 요인이 없는 경우에만 발생한다. (e.g
border,background, 블록 안의 텍스트 등) - 부모 - 자식 태그의 마진값 중 더 큰 값이 자식 element의 마진값으로 적용
- 부모 태그의 시각적 효과를 주는 요인이 없는 경우에만 발생한다. (e.g
빈 element에서 발생 (시각적 효과를 주는 요인이 없는 element)
margin-top과margin-bottom중 큰 값만 해당 태그의 마진값으로 적용됨
참고
2020.04.28 20:54 작성