如何將元素添加到給定的用CSS填充

Question

在下面的圖像中。我給了容器10px的填充，因爲大多數時候我需要填充。只有標題（藍色）我不需要填充。如何擴展標題的填充？

http://i.stack.imgur.com/DeSHZ.jpg

我不希望給個別填充到容器內的每個元素。在標題

Answer 1

緣陰性。

查看的jsfiddle：http://jsfiddle.net/f2cdJ/

CSS

div { 
    background: red; 
    padding:10px; 
    width:200px; 
} 
p { 
    background: green; 
} 
h2 { 
    margin: 0 -10px; 
    background: blue; 
} 

HTML

<div> 
    <p>This is the paragraph. This is the paragraph.</p> 
    <h2>This is a heading</h2>  
    <p>This is the paragraph. This is the paragraph.</p> 
    <h2>This is a heading</h2> 
    <p>This is the paragraph. This is the paragraph.</p> 
</div> 

Answer 2

正如jessegavin說，使用切緣陰性。

負邊界很時髦，但它們正常工作。你必須包括10px填充兩次（一次爲左，其他時間爲正確的填充）爲標題的width，然後做一個負margin-left：

margin-left: -10px; 

Answer 3

使用相同的代碼jessegavin確實。我用相對和絕對定位

看到它的jsfiddle here

CSS

div { 
background: red; 
padding:10px; 
width:200px; 
position:relative; 
} 
p { 
background: green; 
} 
h2 { 
background: blue; 
position:absolute; 
left:0; 
width:100%; 
} 

HTML

<div> 
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p> 
    <h2>This is a heading</h2>  
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p> 
    <h2>This is a heading</h2> 
    <p>This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph. </p> 
</div>