How do you prevent expanding outer element when adding padding? [duplicate]

Question

I'm not a designer. When writing CSS it often happens that I need to add some padding to an element. How do you avoid that padding to propagate to the parent element ?

HTML:

<div id="outer">
  <input id="login">
</div>

CSS:

#outer {
  width: 300px;
}

#login {
  width: 100%;
  padding: 1em;
}

If you use that HTML+CSS, you'll see that the #outer element is bigger than 300px. The easiest solution if to re-write the #login's width to "300px - to_pixel(1em)". It works well but also means that now the font size needs to be fixed. Is there another way where I don't need to convert everything in pixels ?

Answer 1

You can css box-sizing property like this:

#outer {
  width: 300px;
    background:red;
    height:100px;
}

#login {
  width: 100%;
  padding: 1em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

http://jsfiddle.net/TQXdn/

box-sizing does not work in IE7

Answer 2

What you want is the box-sizing property. Take a look at this jsFiddle for it in practice. Just add this:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

to your #login CSS. This is supported in most modern browsers, including IE8+.