当您想在 HTML 元素之间添加空格（使用 CSS）时，您将其附加到哪个元素？
我经常遇到以下情况：
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's another heading</h1>
<div>This is a footer</div>
</body>
现在，假设我希望每个元素之间有 1em 的空间，但没有一个位于第一个 h1 上方或最后一个 div 下方。我要把它附加到哪些元素上？
显然，没有真正的技术的这之间的区别：
h1, p { margin-bottom: 1em; }
...和这个...
div { margin-top: 1em; }
p { margin-top: 1em; margin-bottom: 1em }
我感兴趣的是次要因素：
- 一致性
- 适用于所有情况
- 轻松/简单
- 易于进行更改
例如：在这个特定的场景中，我会说第一个解决方案比第二个更好，因为它更简单；您仅将 margin-bottom 附加到单个属性定义中的两个元素。但是，我正在寻找更通用的解决方案。每次我做 CSS 工作时，我都会感觉有一个很好的经验法则可以应用......但我不确定它是什么。有人有好的论据吗？
当我希望元素在下一个元素之前有空间时，我倾向于在元素上使用底部边距，然后在 css 中使用“.last”类来删除最后一个元素的边距。
<body>
<h1>This is the heading</h1>
<p>This is a paragraph</p>
<h1>Here's another heading</h1>
<div class="last">This is a footer</div>
</body>
div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }
但在你的例子中，这可能不是that适用，因为页脚 div 很可能有自己的类和特定样式。
当我有几个相继的相同元素（段落和其他内容）时，我使用的“.last”方法仍然对我有用。
当然，我从“Elements”CSS 框架中精心挑选了该技术。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
