如何将元素添加到给定的用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>