title: How can I prevent a <button> shrinking to the size of it's content?
body: <p>I have two elements in a container:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;span&gt;This is a div&lt;/span&gt;
      &lt;button&gt;This is a button&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styled as follows:</p>
  
  <pre><code>span, button {
      display: block;
      padding: 4px;
      border: 1px solid black;
      margin: 5px;
      background: #c0c0c0;
      font: inherit;
  }
  
  .container {
      border: 1px solid black;
  }
  </code></pre>
  
  <p>You can see a live demo <a href="http://jsfiddle.net/925qz/" rel="noreferrer">here</a>.</p>
  
  <p>Why does the button not appear the same width as the span? How can I make the button behave like a standard block-level element?</p>
  
  <p>I need to use a <code>&lt;button&gt;</code> here because its purpose is to submit the form.</p>