IMG와 H2 요소 사이의 마진 붕괴가 발생했습니다.

Question

이미지와 h2 사이의 수직 여백이 왜곡되지 않는 이유가 있습니까? 나는 다음과 같은 코드와 스타일을 가지고있다. 모든 독서에서 img 태그로 예외가 없습니다. IMG가 기술적으로 인라인이기 때문에 그렇습니까? Chrome에서는 적어도 상단 및 하단에 여백이 추가됩니다. 블록 요소에 이미지를 래핑하는 것이 더 나은 방법입니까?

<section id="test"> 
    <img src="img/web_dev2@2x.png"/> 
    <h2>Test</h2> 
</section> 

스타일 :

img, h2 { 
    margin: 2em 0; 
} 

- 편집 : 나는 P 태그와 IMG을 포장하고 대신에 마진을 적용 할 때 , 여백의 붕괴가 예상대로. 그러면 가장 좋은 방법은 무엇입니까?

Answer 1

여백 블록 사이의 유일한 collapses는 :

두 마진 adjoining있는 경우 만 모두에 속하는

• 의 흐름 같은 block formatting context
• [참여 block-level boxes .. .]

하지만 이미지는 기본적으로 인라인 수준입니다. 그것을 Blockify :

img, h2 { 
 
    display: block; 
 
    margin: 2em 0; 
 
}

<section id="test"> 
 
    <img src="/favicon.ico"/> 
 
    <h2>Test</h2> 
 
</section>

이