如何在div之间应用间距而不会在右边或左边多余？

Question

这是我面临的常见问题之一，我最终会有令人讨厌的额外间隔标记，以避免在右侧或左侧有一个边距（如果它是垂直菜单，也会在顶部或底部）。

是否有一种干净的CSS方法可以避免为最后一个元素应用边距？

---

Answer 1

使用:not(:last-child)。

.box:not(:last-child) {
    margin-right: 10px;
}

或者，

.box:not(:first-child) {
    margin-left: 5px;
}

.box:not(:last-child) {
    margin-right: 5px;
}

或者，

.box {
    margin-right: 10px;
}
.box:last-child {
    margin-right: 0px;
}

或者，

.box {
    margin: 0 5px;
}

.box:first-child {
    margin-left: 0;
}

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

---

兼容性：

• CSS2 :not伪类
• CSS2 :first-child伪类
• CSS3 :last-child伪类

Answer 2

您应该使用：

.box {
    margin-left: 20px
}
.box:first-child {
    margin-left: 0
}

这比使用:last-child（来自CSS 3）更好，因为在IE7 / 8中不支持，而:first-child（来自CSS 2）是。

Answer 3

我想你可以尝试这个，http://jsfiddle.net/yuliantoadi/g98Wq/

html：

<div class="container">
<div class="box">
    box 1
</div>
<div class="box">
    box 2
</div>
<div class="box">
    box 3
</div>
    <div style="clear:both"></div>
</div>

的CSS：

.box{
    width:32%;
    float:left;
    background:red;
    margin-left:2%;
}
.container {
    background:blue;
    padding:2%;
}
.container .box:first-child{
    margin-left:0;
}

是你的意思吗？

Answer 4

根据Quirks Mode：IE6 / 7/8不支持last-child，因此可以选择将另一个类应用于最后一个元素，然后覆盖CSS中的边距。