하위 요소 여백의 상위 요소 포함 불일치

여백이 있는 요소가 다른 요소 내에 배치되면 상위 요소가 그렇지 않을 수 있습니다. 항상 그 마진을 포함하십시오. 이러한 일관되지 않은 동작은 많은 개발자들을 당황하게 했습니다.

이 현상을 이해하려면 마진 축소의 개념을 자세히 살펴볼 필요가 있습니다. W3C 사양에서는 축소 여백을 단일 여백을 형성하기 위해 두 개 이상의 상자에 대한 인접한 여백(중간 콘텐츠, 패딩 또는 테두리 없음)의 조합으로 정의합니다.

여백이 배치된 요소의 경우 다른 요소 내에서 하위 요소의 위쪽 및 아래쪽 여백은 상위 요소의 위쪽 여백을 통해 축소될 수 있습니다. 이것이 일반적으로 상위 요소가 하위 요소의 여백을 포함하게 만드는 원인입니다.

그러나 이 기본 동작을 재정의할 수 있는 특정 조건이 있습니다. 이러한 조건은 다음과 같습니다.

• 상위 요소에 실선 테두리 적용
• 하위 요소의 위치를 ​​절대 위치로 설정
• 하위 요소에 인라인 블록 표시 제공
• 상위 요소에서 자동 오버플로 활성화

이러한 재정의의 이유는 모두 하위 요소의 여백이 상위 요소의 여백을 통해 축소되는 것을 방지하는 경계 생성과 관련되기 때문입니다.

마진 축소에 관한 W3C 사양은 혼란스럽고 때때로 비논리적으로 보일 수 있다는 점에 유의하는 것이 중요합니다. "여백 여백"(상위 여백에 닿고 상위 여백에 포함되지 않는 여백)과 "접힌 여백"(겹칠 수 있는 인접 여백)을 혼합합니다.

"접기"라는 제목의 사이트 포인트 기사 여백"은 원래 질문에 설명된 정확한 시나리오를 보여주는 예를 포함하여 이 동작에 대한 자세한 설명을 제공합니다. 이러한 동작을 이해하는 것은 웹 개발에서 일관되고 예측 가능한 레이아웃을 만드는 데 중요합니다.