html - 标准化具有未知子项的元素上的感知填充

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;}

产生这样的输出:

...但是我们想要规范化框的“填充”，使其在所有边上看起来都相等:

• .box :last-child太简单了，这必须至少在 IE8 和现代浏览器(但它可以与仅限 IE 的方法结合使用)。
• 我不想使用额外的标记或 javascript。

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

fiddle :http://jsfiddle.net/yuXcH/1/

Answer 1

如您所见in this question , 即使它已经有 2 年的历史了，在 IE8 中也没有“简单”的方法来做到这一点(另一个线程只是关于 IE6/7，但事情没有改变——IE8 不支持 :last-child 任一个)。

在我看来，最好的方法是手动将类 last-child 添加到您的最后一个 child ，这样您就可以:

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

另一种方法是使用 javascript，如果您有很多框，这会更容易。用jQuery ，它看起来像这样:

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

我能想到的唯一“纯 CSS”解决方案是更改您的所有填充/边距，以始终生成一个四面都有相同填充的框，就像 Lollero 建议的那样，但是与您之前的解决方案相比，这会导致框内元素之间的不同边距。