IT탐험

마진 병합 현상 (collapsing margins) 본문

공부내용정리/CSS

마진 병합 현상 (collapsing margins)

watercase 2021. 11. 28. 12:39
  • 마진 병합이란 인접한 공간에 margin-bottom 과 margin-top 속성을 적용할 경우 두 속성중 큰 속성값이 작은 속성값을 병합하는 현상을 의미함
    • 형제간 발생하는 마진 병합, 부모 자식간 발생하는 마진 병합이 있음
    • 마진 병합은 block 요소의 상하에서만 일어나는 현상으로 margin-left or right에서는 발생하지 않음

 

  • 웹 사이트 레이아웃 작업 시 margin-top 과 margin-bottom 속성이 적용되지 않을 경우가 있는데 이는 마진 병합 현상 때문임

 

  • 형제간 마진 병합 현상
    • 상단 영역에 margin-bottom: 100px; 하단 영역에 margin-top: 50px; 적용 시 150px의 공백이 아닌 100px의 공백이 생김
  • 부모 자식간 마진 병합 현상
    • 자식 영역에 margin-top: 100px; 을 적용하면 자식뿐 아니라 부모 영역도 같이 이동함
    • 여러 해결 방법이 있으나 자식 영역에 position: absolute; 를 적용하는것이 해결 방법중 하나임

'공부내용정리 > CSS' 카테고리의 다른 글

transform, transition, animation  (0) 2021.12.13
z-index, float, clear  (0) 2021.12.13
position 속성으로 HTML 태그에 차원 부여  (0) 2021.11.28
display속성 block요소와 inline요소의 차이  (0) 2021.11.28
'공부내용정리/CSS' Related Articles more
Comments