Create Padding around a div?

Question

How do I create padding around a div but not pushing out the container?

http://codepen.io/vincentccw/pen/jgGtd

I create 2divs but then when I set a padding around it the child div got push out??

Answer 1

HTML

<div>
  <div>lol</div>
</div>

CSS

div{
  background:yellow;
  width:auto;
  height:auto;
  padding:1em;
}
div div{
 background:red;
}