盒子中的 CSS 一致的顶部/底部填充答案

【问题标题】：CSS consistent top/bottom padding in a box盒子中的 CSS 一致的顶部/底部填充
【发布时间】：2012-08-01 15:42:40
【问题描述】：

我想创建一个四边间距一致的盒子，无论内容如何。

不幸的是，元素有边距，当给盒子填充时会导致问题。这是意料之中的，因为元素的边距不会在填充上“流出”到盒子外面。演示在http://jsfiddle.net/cZf7E/1/

到目前为止，我已经为盒子中的任何东西设置了特殊的样式规则，即顶部（margin-top: 0）和底部（margin-bottom: 0）。顶部还不错，但底部有很多潜在的样式标签。

有没有一种不那么老套的方法来做到这一点？

【问题讨论】：

标签： css

【解决方案1】：

怎么样

aside :first-child {
    margin-top: 0;
}
aside :last-child {
    margin-bottom: 0;
}

第一个/最后一个元素可以是任何类型的元素（h1、h2、...、p、div、span）

注意aside和first-child/last-child之间有一个空格。没有它，样式将应用于第一个/最后一个aside。

如果aside中的层级更多，不希望向下传播，最好使用

aside > :first-child {
    margin-top: 0;
}
aside > :last-child {
    margin-bottom: 0;
}

为了只选择aside 的直接子代。

Propagation vs. no propagation demo（当然，margin 不适用于 span、em 或 strong 等内联元素 - 这只是为了展示传播的工作原理。）

支持：正如 Ben Dyer 所指出的，last-child 是 CSS3 pseudo-class。 IE8 或更早版本不支持它。此外，first-child 在 IE8 和 7 中存在问题。

【讨论】：

关于这个解决方案唯一需要注意的是:last-child 在 IE9 之前无法使用任何东西。 :first-child 可以与 IE7 和 IE8 一起使用，但它有一些古怪的行为。这是最优雅的解决方案，但如果您需要完整的浏览器支持，您可能会被 hacky 解决方案所困。不过，好的浏览器会完全支持这些选择器。
浏览器支持是个问题，但我越来越可以让小东西在视觉上退化。谢谢 Ana，自从我开始使用 CSS 以来，我认为会有一些东西出现（有相当好的浏览器支持）！使用aside :first-child vs aside>:first-child 有什么优势/劣势 - 解析器效率？
实际上，最好指定aside > :first-child 以停止传播给aside 的孩子... aside.
我会说它们是一个非常不同的 CSS 声明。第二个仅对side 的直接子代有效。另一个适用于在其祖先中具有旁边的每个第一个孩子。