title: css border changes the div size completely?
body: <p><strong>EDIT: found a very good link explaining all about border collapse:</strong></p>
  
  <p><a href="http://960development.com/understand-css-margins-collapsing/" rel="noreferrer">border collapse explained with examples</a></p>
  
  <p><strong>End of edit. Enjoy :)</strong></p>
  
  <p>I am failing to understand this...
  Why applying a 1px solid black border to my div changes the div's size by a lot?
  (without the border I can see a relatively thin line as my back ground color, with the border the רectangle of the background color is much wider, see the pictures)
  this pic is without applying the border:
  <img src="https://i.stack.imgur.com/cHZOl.png" alt="div without the border - see the relatively small background">
  and now look at this photo (the only difference is the border...)
  <img src="https://i.stack.imgur.com/R01JE.png" alt="div with border, suddenly the background is much bigger!"></p>
  
  <p>can someone explain how the border influences so much on the div size / what is really happening here?!</p>
  
  <p>style:</p>
  
  <pre><code>#header {
  background-color: yellow;
  color: white;
  text-align: center;
  border: 1px solid black;
  }
  </code></pre>
  
  <p>here is a fiddle so you can play around:
      <a href="http://jsfiddle.net/JimmyBoy/scqw9uzx/" rel="noreferrer">my fiddle</a>
  Thanks a lot,
  Jimmy.</p>