Question

In the below image. I’ve given 10px padding to container because most of the time I need that padding. only the headings (blue) I don’t need padding. How to extend heading over padding?

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

I don’t want to give individual padding to each element inside container.

Answer 1

Negative margin on the headings.

See on 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>