Cómo llevar un elemento al relleno dado con CSS

En la imagen de abajo. Le he dado 10px de relleno al contenedor porque la mayoría del tiempo necesito ese relleno. solo los encabezados (azul) no necesito relleno. ¿Cómo extender el rumbo sobre el relleno?

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

No quiero dar relleno individual a cada elemento dentro del contenedor.

introduzca la descripción de la imagen aquí

Margen negativo en los encabezados.

Ver en jsFiddle: http://jsfiddle.net/f2cdJ/

CSS

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

HTML

 

This is the paragraph. This is the paragraph.

This is a heading

This is the paragraph. This is the paragraph.

This is a heading

This is the paragraph. This is the paragraph.

Usando el mismo código que hizo jessegavin. Utilicé posicionamiento relativo y absoluto.

velo en jsFiddle aqui

CSS

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

HTML

 

This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph.

This is a heading

This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph.

This is a heading

This is the paragraph. This is the paragraph. This is the paragraph. This is the paragraph.

Como dijo jessegavin , usa márgenes negativos.

Los márgenes negativos son funky, pero funcionan correctamente. Tendría que incluir el relleno de 10px dos veces (una para la izquierda, otra para el derecho) en el width del encabezado, y luego hacer un margin-left negativo margin-left :

 margin-left: -10px;