CSS一致的顶部/底部填充框

我想创建一个四面都有一致间距的框，而不管内容如何。CSS一致的顶部/底部填充框

不幸的是，元素有边距，当给定边框填充时会引起问题。这是预料之中的，因为元素的边距不会通过填充“流出”框。一个演示是在http://jsfiddle.net/cZf7E/1/

到现在为止我有特殊的样式规则在这就是顶部的框中输入任何内容（与margin-top: 0）和底部（与margin-bottom: 0）。对于顶部来说，这并不坏，但底部有很多潜在的标签可供选择。

有没有一种方法可以做到这一点，不是很冒险？

2012-07-25 PeterB

如何

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 - 它只是说明如何传播的作品。）

支持：由于本代尔已经指出，last-child是CSS3 pseudo-class。它不支持IE8或更高版本。此外，first-child是在IE8和7中的越野车。

来源

2012-07-25 14:29:16 Ana

唯一需要注意的是这个解决方案是'：last-child'在IE9之前不能使用任何东西。 '：first-child'可以使用IE7和IE8，但它有一些古怪的行为。这是最优雅的解决方案，但是如果您需要全面的浏览器支持，那么您可能会遇到一些拙劣的解决方案。不过好的浏览器将得到这些选择器的全力支持。 – 2012-07-25 14:34:34

浏览器支持是一个问题，但越来越多，我可以让小东西在视觉上降级。感谢Ana，我认为自从我开始使用CSS以来，会有相当不错的浏览器支持。使用“搁置：第一胎”还是“搁置”：第一胎解析器的效率有什么优势/劣势？ – PeterB 2012-07-25 14:41:07

实际上，最好指定'aside'：first-child'来阻止传播给子女的孩子...'搁置' - 我没有考虑到你可能在' aside'。 – Ana 2012-07-25 14:47:21

CSS一致的顶部/底部填充框

回答

相关问题