title: Why does an <input> element lose its left/right margins when given a width?
body: <p>The following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;form&gt;
      &lt;input type=text&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Produces the following box model in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/o5WzP.png" alt="box model no width"></p>
  
  <p>However, if the input type is styled with a width:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;form&gt;
      &lt;input type=text style="width: 100px;"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The left and right margin are removed:</p>
  
  <p><img src="https://i.stack.imgur.com/rl5o0.png" alt="enter image description here"></p>
  
  <p>Why is this?</p>