边缘底部在响应式设计中无法正常工作

Question

我在课堂上使用margin-bottom进行响应式设计时遇到了这个奇怪的问题。例如

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的“space-bottom”类在移动设备中无效。即使我将它插入媒体查询中也很奇怪。但是，当我将“班级”改为“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>的默认边距，您可能会注意到<div>元素和<p>的边距正在折叠。

有关此功能的详情，请参阅Mozilla Developer Network's page on collapsing margins。

另外，第二个例子中的CSS不正确;应选择标识为<space-bottom>的{​​{1}}元素。为什么它有效或似乎有效，对我来说是一个谜。