如何使用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>