Grabbing control of that unruly child-element padding and margin

The box-sizing property makes it easy for you to set a width and height attribute on a div, and let it remain static even if you add padding to the child elements of the div.

Here's an example:

#div_box {
  width: 430px;
  height: 315px;
  box-sizing: border-box;
}

Now, if any child element of #divbox has padding or margin set to it, it won't affect the height and/or width of #divbox

#div_box p {
  padding: 20px;
}

Try it :) Even better, write a SASS Mixin to accommodate for vendor prefixes:

@mixin box-sizing() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Boom, that was easy, wasn't it? Compatible with all browsers except IE7.