CSS 控制块元素间距答案

【问题标题】：CSS controlling block element spacingCSS 控制块元素间距
【发布时间】：2010-09-30 03:38:05
【问题描述】：

我有一个<div>，其中填充了不同的块元素（例如<p>、<ul>、<ol>、<blockquote> 等）。我希望只控制这些子块元素之间的间距。我还希望子块元素与父 div 的顶部和底部之间没有间距。

我尝试了一些解决方案。主要的是使用相邻兄弟组合器的规则混乱。另一种是将margin-top 值设置为所需的间距，然后使用:first-child 伪选择器。

是否有任何更清洁的解决方案具有相当的兼容性？

谢谢。

【问题讨论】：

【解决方案1】：

我个人会为所有子元素类型分别制作选择器，因为 CSS3 伪类目前在所有浏览器中都没有很好地实现。你可以以我能想到的最干净的方式这样做：

div.class blockquote, div.class p, div.class ul { /* something */ }

等等

【讨论】：

相邻的兄弟组合子 (aka.+) 是 CSS 2 :s 不确定你展示的内容如何用于实现我想要的。我希望控制<div> 的子块元素之间的空间，并且只控制它们之间的空间。（例如，如果 <div> 中有 2 个 <p>，我希望第一个有 0 上边距，最后一个有 0 下边距。然后第一个或第二个有一个设定值分别是它的底部或顶部边距。目前我通过p + p { margin-top: whatever } 执行此操作，但使用的块元素越多，它就越混乱。）

【解决方案2】：

如果我的观点正确，这还不够吗？

div * { margin:0 10px }

虽然从性能上来说 * 是一个糟糕的选择器，但由于浏览器的工作方式：http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/

【讨论】：