title: Input field is not fitting well within a div
body: <p>I can't understand why this input field with margin (at all sides) is not fitting well within that div. I was hoping to see the input with the right margin being shown.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;
    &lt;title&gt;CSS Tests&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class=&quot;div2&quot;&gt;
      &lt;input type=&quot;Foobar&quot;&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  .div2 {
    width: 100%;
    height: 100px;
    background-color:indianred;
  }
  
  .div2 input {
    width: 100%;
    margin: 10px;
    box-sizing: border-box;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/racbe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/racbe.png" alt="input with 100% width and margin but not fitting well" /></a></p>