테두리를 추가해도 높이 계산이 변경되는 이유는 무엇입니까?

Question

나는 두 개의 div 컨테이너가 있습니다. 하나는 경계선이 있고 다른 하나는 경계선이 없습니다.
양쪽 컨테이너 안에 1em의 여백으로 p 단락이 있습니다. 분명히 두 컨테이너 모두 동일한 높이를 가져야합니다.
놀랍게도 Firefox, Chrome, Safari 및 IE의 경우는 그렇지 않습니다.

Fiddle demo

CSS :는

p { display: block; margin: 1em }  

HTML :

<div> 
    <p></p> 
</div> 

<div style="border: 1px solid black"> 
    <p></p> 
</div> 

톤 무엇입니까 그는이 행동을 이유로?

Answer 1

첫 번째 p 요소의 여백은 collapsing이고 부모는 div입니다. 이것은 p 요소의 여백이 div의 여백과 결합하여 div의 경계를 넘는 것을 의미합니다. 결과적으로 div의 키는 해당 어린이의 p과 동일하게 기록됩니다.

두 번째 요소 그룹에서는 테두리를 추가 할 때 여백 축소가 방지됩니다. 이로 인해 부모 div은 p 요소와 여백을 모두 포함하게됩니다. 따라서 div의 높이는 p 요소의 높이와 수직 여백의 합이됩니다.

요소에는 기본 수직 여백이 있고 대부분의 블록 요소에는 고정 높이가 없습니다 (즉, 기본값은 height: auto). 따라서 콘텐츠의 크기에 맞춰 크기가 커질 수 있습니다. 자녀의 마진이 부모의 마진과 함께 무너지면 부모의 신장을 계산할 때 이 아닌이됩니다.