如何使用CSS将元素转换为给定的填充

Question

在下图中。我给container设置了10px填充，因为大多数时候我需要这个填充。只有标题(蓝色)我不需要填充。如何在填充上扩展标题？

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

我不想给容器内的每个元素单独填充。

​

​

Answer 1

标题的边距为负值。

在jsFiddle上查看：

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相同的代码。我使用了相对和绝对定位

在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>

Answer 3

正如jessegavin所说，使用负边距。

负的利润率是时髦的，但它们工作正常。您必须在标题的width中包含两次10px填充(一次用于左填充，另一次用于右填充)，然后执行负margin-left

margin-left: -10px;