css - 框内CSS一致的顶部/底部填充

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

不幸的是，元素具有页边距，在给框填充时会引起问题。这是可以预期的，因为元素的边距不会在填充时从框外“流出”。演示位于http://jsfiddle.net/cZf7E/1/

到目前为止，我对顶部（带有margin-top: 0）和底部（带有margin-bottom: 0）框中的所有内容都有特殊的样式规则。对于顶部来说，还不错，但是在底部，有很多潜在的标签样式。

有没有办法做到这一点呢？

最佳答案

怎么样

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中是错误的。

关于css - 框内CSS一致的顶部/底部填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11651988/