当您要在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; }
在你的例子中,这可能不是适用的,因为页脚div最有可能拥有自己的类和特定的样式.当我有几个相同的元素(段落和什么 – 不是)时,我使用的“最后”方法仍然适用于我.当然,我从“Elements”CSS框架中挑选了这种技术.
