CSS 마진 붕괴 : 마진 탑이 왜 부모 요소를 움직이는가?

CSS 마진 붕괴에 대한 자세한 설명 : 마진 문제를 영리하게 해결

CSS 레이아웃을 학습 할 때 margin 속성은 종종 예상치 못한 결과, 특히 "마진 붕괴"현상을 가져옵니다. 이 기사는 사례를 사용하여 마진 붕괴의 원인과 솔루션을 깊이 분석합니다.

질문 : 하나를 가정하십시오<canvas></canvas> 내부의 요소 중첩<div> 요소 (id는 "one"), "one"에 대한 <code>margin-top 설정합니다. 이상하게도 margin-top 설정 한 후 "하나"요소뿐만 아니라 아래쪽으로 이동할 수 있습니다.<canvas></canvas> 요소도 아래쪽으로 이동했습니다.

코드 구조 (단순화) :

HTML : <canvas><div id="one">...</div></canvas>

CSS : #one { margin-top: 20px; } (다른 스타일은 여기에서 생략됩니다)

분석 : 이것은 CSS 마진 붕괴입니다. 부모 요소 높이가 auto 인 경우, 하위 요소는 블록 레벨 요소이고, 상위 요소는 padding 및 border 가 없으며, 부모 요소의 높이는 하위 요소 margin-top 의 영향을받습니다.<canvas></canvas> 요소의 높이는 자동으로 계산되는 반면 "One"은 블록 레벨 요소, margin-top 및<canvas></canvas> 의 상단 여백<canvas></canvas> 신체의 높이가 증가하여 전체적으로 아래쪽으로 이동합니다.

솔루션 : 마진 붕괴를 피하는 몇 가지 방법이 있습니다.

1. 부모 요소 높이 설정 :<canvas></canvas> 이 요소는 명확한 높이 값 (예 : height: 100px; .
2. 테두리 또는 내부 마진 추가 : 테두리와 같은 부모 요소에 border 또는 padding 추가하십시오 border: 1px solid #ccc; 또는 padding: 10px; .
3. 외부 마진 대신 내부 마진을 사용하십시오. margin-top padding-top 으로 교체하십시오.
4. 플로팅 또는 절대 포지셔닝 사용 : float: left; 또는 position: absolute; 자식 요소 "One"의 경우.

마진 붕괴 메커니즘을 이해함으로써 CSS 레이아웃을 더 잘 제어하고 비슷한 문제를 피할 수 있습니다.