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

Question

我想让顶级元素（它是p，img，hx或其他）与父元素的顶部齐平，同时保持它的兄弟姐妹之间的正常分离。

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

Answer 1

最简单的方法是使用兄弟选择器：

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

此规则仅适用于段落 ，如果它们直接来自另一段落。因此，此规则不适用于您的第一段，因为它不遵循段落。

如果你想要每个段落之间的空格，而不是在第一段之间而不是在最后一段之后，请使用：

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

Answer 2

如果您支持的浏览器没问题，您还可以使用:first-child和:last-child伪选择器。设置所需的边距，然后将其替换为特定元素。

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

Answer 3

实现此目的的最简单方法是仅向元素添加底部边距。因此，在您的情况下，每个p元素的底部边距为20px。这也将保留p元素之间的20px间距。

如果你想删除添加到最后一个p标签的额外20px，那么你需要在p元素的容器中添加一个负底边距。

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

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

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

此外，这适用于所有浏览器，而如果您使用特殊选择器，您的CSS将不会应用于IE6等。