css - 如何在 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伪类