CSS一致的顶部/底部填充在一个框中

Question

无论内容如何，​​我都希望在所有方面创建一个间距一致的框。

不幸的是，元素具有边距，当给出填充框时会导致问题。这是预期的，因为元素的边距不会在填充上“流出”。演示位于http://jsfiddle.net/cZf7E/1/

到目前为止，我对包含在顶部（使用margin-top: 0）和底部（使用margin-bottom: 0）的框中的任何内容都有特殊的样式规则。对于顶部来说它并不坏，但在底部有很多可能的样式标签。

有没有办法做到这一点，不是那么hacky？

Answer 1

怎么样

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

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

DEMO

请注意，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中也是错误的。