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

我想創建一個四面都有一致間距的框，而不管內容如何。CSS一致的頂部/底部填充框

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

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

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

2012-07-25 PeterB

如何

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中的越野車。

來源

2012-07-25 14:29:16 Ana

唯一需要注意的是這個解決方案是'：last-child'在IE9之前不能使用任何東西。 '：first-child'可以使用IE7和IE8，但它有一些古怪的行爲。這是最優雅的解決方案，但是如果您需要全面的瀏覽器支持，那麼您可能會遇到一些拙劣的解決方案。不過好的瀏覽器將得到這些選擇器的全力支持。 – 2012-07-25 14:34:34

瀏覽器支持是一個問題，但越來越多，我可以讓小東西在視覺上降級。感謝Ana，我認爲自從我開始使用CSS以來，會有相當不錯的瀏覽器支持。使用「擱置：第一胎」還是「擱置」：第一胎解析器的效率有什麼優勢/劣勢？ – PeterB 2012-07-25 14:41:07

實際上，最好指定'aside'：first-child'來阻止傳播給子女的孩子...'擱置' - 我沒有考慮到你可能在' aside'。 – Ana 2012-07-25 14:47:21

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

回答

相關問題