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