title: CSS3 box-sizing property
body: <p>I don't understand how should I use box-sizing property. Because this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt; 
          div.container
          {
              width:10em;
              border:1em solid;
          }
          div.box
          {
              box-sizing:border-box;
              -moz-box-sizing:border-box; /* Firefox */
              -webkit-box-sizing:border-box; /* Safari */
              width:50%;
              border:1em solid red;
              float:left;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container"&gt;
          &lt;div class="box"&gt;1&lt;/div&gt;
          &lt;div class="box"&gt;2&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>is equivalent to this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt; 
          div.container
          {
              width:10em;
              border:1em solid;
          }
          div.box
          {
              width:3em;
              border:1em solid red;
              float:left;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="container"&gt;
          &lt;div class="box"&gt;1&lt;/div&gt;
          &lt;div class="box"&gt;2&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So when should I use that property and that exactly that do? I used example from w3 <a href="http://www.w3schools.com/cssref/css3_pr_box-sizing.asp" rel="nofollow">http://www.w3schools.com/cssref/css3_pr_box-sizing.asp</a></p>