CSS一致的頂部/底部填充框

Question

我想創建一個四面都有一致間距的框，而不管內容如何。

不幸的是，元素有邊距，當給定邊框填充時會引起問題。這是預料之中的，因爲元素的邊距不會通過填充「流出」框。一個演示是在http://jsfiddle.net/cZf7E/1/

到現在爲止我有特殊的樣式規則在這就是頂部的框中輸入任何內容（與margin-top: 0）和底部（與margin-bottom: 0）。對於頂部來說，這並不壞，但底部有很多潛在的標籤可供選擇。

有沒有一種方法可以做到這一點，不是很冒險？

Answer 1

如何

aside :first-child { 
    margin-top: 0; 
} 
​aside :last-child { 
    margin-bottom: 0; 
}​ 

首先/最後一個元素可以是任何一種元素（h1，h2，...，p，div，span）

DEMO

注意，有是aside和first-child/last-child之間的空格。沒有它，造型將適用於第一個/最後一個aside。

---

如果將在aside多層次和傳播進一步下跌是不可取的，最好是用

aside > :first-child { 
    margin-top: 0; 
} 
​aside > :last-child { 
    margin-bottom: 0; 
}​ 

爲了只選擇aside的直接孩子。

Propagation vs. no propagation demo（當然，margin將不適用於內聯元素如span，em，或strong - 它只是說明如何傳播的作品。）

---

支持：由於本代爾已經指出，last-child是CSS3 pseudo-class。它不支持IE8或更高版本。此外，first-child是在IE8和7中的越野車。