html - Margin-bottom 在响应式设计中无法正常工作

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 的折叠边距页面。

另外，第二个示例中的 CSS 不正确；那应该选择一个<space-bottom>带有 id 的元素id。为什么它有效，或者似乎有效，对我来说是个谜。