반응 형 디자인에서 여백 바닥이 올바르게 작동하지 않습니다.

Question

반응 형 디자인을 위해 클래스에서 여백을 사용하는 경우 이상한 점이 있습니다. 예를

HTML

<div class="space-bottom"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p> 
</div> 

CSS를 들어

.space-bottom{margin-bottom: 10px} 

클래스 "공간 아래"10px의 마진 바닥과 모바일 장치에서 작동하지 않습니다. 비록 내가 이상한 미디어 쿼리에 삽입하더라도. 하지만 난 "ID"

HTML

<div id="space-bottom"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo sollicitudin molestie. In lacus purus, posuere non lacus eu, pharetra suscipit arcu.</p> 
</div> 

CSS 작동하는 것 같다

#id space-bottom{margin-bottom: 10px} 

에 "클래스"를 변경할 때. 미디어 쿼리 내에 속성을 삽입 할 필요가 없습니다.

Answer 1

첫 번째 예에서는 CSS에 문제가 없습니다. 눈에 띄는 것은 <p>의 브라우저의 기본 여백을 기준으로 <p> 요소와 <div>의 여백이 축소되어 있다는 것입니다.

이 기능에 대한 자세한 내용은 Mozilla Developer Network's page on collapsing margins을 참조하십시오.

또한 두 번째 예제의 CSS가 잘못되었습니다. id가 id 인 <space-bottom> 요소를 선택해야합니다. 그것이 효과가 있거나 작동하는 이유는 나에게 수수께끼입니다.