刷新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

完成此操作的最簡單方法是僅爲元素添加底部邊距。所以在你的情況下，每個p元素將有一個20px的底部邊距。這也將保留你的p元素之間的20px間距。

如果您希望刪除添加到最後一個p標籤的額外20像素，那麼您需要爲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等。

Answer 3

您也可以使用:first-child和:last-child僞選擇，如果這是確定與您支持的瀏覽器。設置所需的邊距，然後將其替換爲特定元素。

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