Question

我的<div>样式就像一个盒子：

.box {
    border:2px solid #ccc;
    background:#eee;   
    padding:1em;
    margin:1em;
}

在此框中，可以按任何顺序存在任意数量的任何类型的子元素：

<div class="box">
    <h3>Howzit goin</h3>
    <p>Here comes a list:</p>
    <ul>
        <li>I don't know what</li>
        <li>this box will contain</li>
        <li>but it could be anything</li>
    </ul>
</div>

大多数或所有子元素都从基本排版样式表继承了不同长度的底部边距：

/* Example global typography */
p {margin:0 0 1.5em;}
ul {margin:0 0 2.5em;}

产生如下输出：

enter image description here

...但是我们想要对盒子的“填充”进行标准化，使其在所有方面看起来都相同：

enter image description here

.box :last-child太容易了，至少在IE8中也是如此现代浏览器（但它可以与IE-only方法结合使用）。
我不想使用额外的标记或javascript。

我可以使用其他CSS技巧来获得我想要的输出吗？

小提琴：http://jsfiddle.net/yuXcH/1/

Answer 1

正如你可以阅读in this question，即使它大约2岁，在IE8中也没有“简单”的方法（另一个线程只是关于IE6 / 7，但事情没有改变 - IE8也不支持:last-child。

在我看来，最好的方法是手动为您的上一个孩子添加课程last-child，以便您可以这样做：

.box .last-child{ margin-bottom: 0; }

替代方案是使用javascript，如果你有很多盒子，这会更容易。使用jQuery，它看起来像这样：

$(function(){
  $(".box :last-child").css("margin-bottom","0");
})

我能想到的唯一“纯CSS”解决方案是改变所有填充/边距，以便总是在Lollero建议的所有边上生成相同填充的框，但与之前的解决方案相比，这将导致框内元素之间的不同边距。

Answer 2

我可能会通过在顶部和底部都有填充或边距来补偿额外的空间。

http://jsfiddle.net/lollero/yuXcH/2/

也可以使用父元素顶部和/或底部的一些填充更改。

http://jsfiddle.net/lollero/yuXcH/3/

规范化具有未知子项的元素上的感知填充

2 个答案: