title: Why does display:block not stretch buttons or input elements
body: <p>I'm trying to understand the reason behind this problem:</p>
  
  <p>What's the underlying reason behind <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code> elements not behaving like other elements when set to <code>display:block</code>!</p>
  
  <p>I'm not looking for workarounds to fix this problem, so please don't point me to <a href="https://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not">this answer</a> because it doesn't answer the question.</p>
  
  <p><a href="http://jsfiddle.net/czb8Z/3/" rel="noreferrer">Here's a js-fiddle that illustrates the problem</a></p>
  
  <p><strong>Update 1:</strong> @Pete is correct, the default size attribute of an element is what sets the size even on block, as you can <a href="http://jsfiddle.net/czb8Z/10/" rel="noreferrer">in this fiddle</a> the size and cols attribute of <code>&lt;input&gt;</code> and <code>&lt;textarea&gt;</code> changes their width. That solves part of my question.</p>
  
  <p><strong>With that in mind, my question is now, why is the</strong> <code>&lt;button&gt;</code> <strong>element not behaving like other block elements? It's a mystery to me!</strong></p>