title: How do you prevent expanding outer element when adding padding?
body: <p>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 ?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="outer"&gt;
    &lt;input id="login"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#outer {
    width: 300px;
  }
  
  #login {
    width: 100%;
    padding: 1em;
  }
  </code></pre>
  
  <p>If you use that HTML+CSS, you'll see that the <code>#outer</code> element is bigger than <code>300px</code>. The easiest solution if to re-write the <code>#login</code>'s <code>width</code> to <code>"300px - to_pixel(1em)"</code>. 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 ?</p>