title: Why do a div and a button with the same styles render at different sizes?
body: <p>I have a page with some clickable <code>&lt;div&gt;</code> elements, and I want to change them to <code>&lt;button&gt;</code>s instead to make it easier to identify them via jQuery. But when I change the <code>&lt;div&gt;</code>s to <code>&lt;button&gt;</code>s, their size changes. (I'm styling them as fixed width and height, but the button renders at a different width and height than the div does.)</p>
  <p>Here's a JSFiddle that reproduces the problem: <a href="http://jsfiddle.net/AjmGY/" rel="nofollow noreferrer">http://jsfiddle.net/AjmGY/</a></p>
  <p>Here's my CSS:</p>
  <pre class="lang-css prettyprint-override"><code>.styled {
      border: 4px solid black;
      background: blue;
      width: 100px;
      height: 100px;
  }
  </code></pre>
  <p>And my HTML:</p>
  <pre><code>&lt;div class=&quot;styled&quot;&gt;&lt;/div&gt;
  &lt;button class=&quot;styled&quot;&gt;&lt;/button&gt;
  </code></pre>
  <p>I would expect to see two boxes of identical size, but the bottom box (the <code>&lt;button&gt;</code>) is noticeably smaller. This behavior is consistent across all the browsers I tried it on, both Windows (Chrome, FireFox, IE, Opera) and Android (built-in browser and Dolphin).</p>
  <p>I tried adding <code>display: block;</code> to the style, thinking that that might make them both render using the same rules (i.e., make the <code>button</code> render like a <code>div</code> since it's a block element now), but that had no effect -- the button remained smaller.</p>
  <p>As I increase the border width, the disparity increases. It looks as though the button's <code>border</code> is <em>inside</em> its <code>width</code>, rather than above and beyond its <code>width</code> as with the <code>&lt;div&gt;</code>. As far as I understand it, this violates the <a href="http://www.w3.org/TR/CSS2/box.html" rel="nofollow noreferrer">box model</a>, though the W3C does say:</p>
  <blockquote>
  <p><a href="http://www.w3.org/TR/CSS2/box.html#border-properties" rel="nofollow noreferrer">user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for &quot;ordinary&quot; elements</a>.</p>
  </blockquote>
  <p>Is it normal / documented / expected behavior for a <code>button</code> to have its border on the inside of its width and height, rather than outside? Can I rely on this behavior?</p>
  <p>(My page uses an HTML5 doctype, if that's relevant.)</p>