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

我有一个样式像盒子的

：

.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>

产生如下输出：

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

…但我们希望规范化长方体的“填充”，使其在所有边上显示相等：

• .box:last child

  太容易了，这至少在IE8和 现代浏览器（但它可以与只支持IE的方法结合使用）
• 我不想使用额外的标记或javascript

有没有其他CSS技巧可以用来获得我想要的输出

---

小提琴：

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

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

---

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

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

正如您所读到的，即使它大约2岁，在IE8中也没有“简单”的方法来实现这一点（另一个线程只是关于IE6/7，但事情没有改变-IE8也不支持

：last child

）

在我看来，最好的方法是手动将类

last child

添加到您的last child，以便您可以执行以下操作：

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

另一种选择是使用javascript，如果有很多框，这会更容易。使用时，它将如下所示：

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

我能想到的唯一“纯CSS”解决方案是改变你所有的填充/边距，使其始终像Lollero建议的那样在所有边上都有相同的填充，但与你以前的解决方案相比，这将导致框内元素之间的边距不同。

如你所知，即使它已经使用了大约2年，在IE8中没有“简单”的方法来做到这一点（另一个线程只是关于IE6/7，但事情没有改变-IE8也不支持

：last child

）

在我看来，最好的方法是手动将类

last child

添加到您的last child，以便您可以执行以下操作：

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

另一种选择是使用javascript，如果有很多框，这会更容易。使用时，它将如下所示：

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

---

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

#1不是一个选项，因为首先-输出不同，我必须选择

.box p、.box ul、.box ol、.box blockquote{}

等来更改它，否则它将影响所有元素，并导致页面其余部分的排版不好#2将不起作用，因为它不规范底部填充，它将它延迟到最后一个子项，这意味着它仍然可以是任何值，包括

0

@WesleyMurch我不知道您想要什么。#1不是一个选项，因为首先-输出不同，我必须选择

.box p、.box ul、.box ol、.box blockquote{}

等进行更改，否则会影响所有元素并导致页面其余部分的排版不佳#2将不起作用，因为它没有规范底部填充，它将其推迟到最后一个子级，这意味着它仍然可以是任何值，包括

0

@WesleyMurch我不知道你想要什么。问题是，这来自所见即所得，我不能期望穷人添加CSS类，他们只是突出显示文本并单击“把它做成一个盒子“我想你可能是对的，没有简单的方法可以做到。我可能会用js添加一个

.last child

类，但不幸的是它不会出现在WYSIWYG中。。。迫不及待地想摆脱IE8。我可能会接受这个答案-我对另一个解决方案不抱太大希望，谢谢。问题是，这来自所见即所得，我不能指望穷人添加CSS类，他们只需突出显示文本并单击“使其成为一个框”。我想你可能是对的，没有简单的方法可以做到。我可能会用js添加一个

.last child

类，但不幸的是它不会出现在WYSIWYG中。。。迫不及待地想摆脱IE8。我可能会接受这个答案——我对另一个解决方案没有太大希望，谢谢。