刷新CSS中的第一页边距和最后一页边距

我希望使顶部元素（无论是p、img、hx还是其他）与父元素的顶部齐平，同时保持其兄弟元素之间的正常间隔

---

例如，我有一个充满p元素的div。每个p元素都有一个上下边距，比如说10px。每个p元素之间用20px隔开（上面的10个，下面的10个）。这样做的副作用是，第一个p向下推10px，底部p向上推10px。

实现这一点的最简单方法是只向元素添加底部边距。所以在你的例子中，每个p元素都有一个20px的底边。这也将在p元素之间保留20px的间距

.container {margin-bottom:-20px;}
.container p {margin-bottom:20px;}

.container p{margin:10px 0;}
.container p:first-child{margin-top:0;}

如果您希望删除添加到最后一个p标记的额外20px，则需要在p元素的容器中添加负的底部边距

.container {margin-bottom:-20px;}
.container p {margin-bottom:20px;}

.container p{margin:10px 0;}
.container p:first-child{margin-top:0;}

您也可以通过保留单独的顶部和底部边距来实现这一点，但这会使代码更加复杂：

.container {margin-top:-10px; margin-bottom:-10px;}
.container p {margin-top:10px; margin-bottom:10px;}

---

此外，这将适用于所有浏览器，而如果您使用特殊选择器，您的CSS将不会应用于IE6等。最简单的方法是使用同级选择器：

p + p {
    margin-bottom: 10px;
    margin-top: 10px;
}

这条规则仅适用于直接位于另一段落之后的段落。所以，这条规则不适用于你的第一段，因为它不在一段之后

如果您希望在每个段落之间留有空格，但不是在第一段之前，也不是在最后一段之后，请使用以下命令：

p + p {
    margin-top: 20px;
}

---

如果您支持的浏览器允许，您还可以使用

：first child

和

：last child

伪选择器。设置所需的边距，然后替换特定图元的边距

.container {margin-bottom:-20px;}
.container p {margin-bottom:20px;}

.container p{margin:10px 0;}
.container p:first-child{margin-top:0;}

---

相关：小点：相邻p元素的边距通常是折叠的（），所以它们加起来是10px，而不是20px。我不知道这一点。整洁的谢谢：）