0

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

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

到目前为止，我对盒子里的任何东西都有特殊的样式规则，它位于顶部（with margin-top: 0）和底部（with margin-bottom: 0）。对于顶部来说还不错，但在底部有很多潜在的风格标签。

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

4

1 回答 1

1

怎么样

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

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

演示

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

如果将有更多级别aside并且不希望进一步向下传播，则最好使用

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

为了只选择aside.

传播与无传播演示（当然，margin不适用于内联元素，例如span,em或strong- 它只是为了展示传播的工作原理。）

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

于 2012-07-25T14:29:16.367 回答