title: The background color reaches more area if a border is active
body: <p>That's the best title I could come up with, sorry if it's not clear.</p>
  
  <p>I have a table, which has a top-margin. Around that table I have a div, which has a blue background. This blue background only affects the table itself, and doesn't include the margin area (which seems weird considering the margin area should still be inside that div). Yet if I add a border to the div, the whole area (including the margin) gets that background.</p>
  
  <pre><code>#table_div {
    background-color: blue;
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
  
  #main_table {
    margin: auto;
    margin-top: 100px;
  }
  </code></pre>
  
  <p>Is there any particular reason on why this happens?</p>
  
  <p>To get a background without having to use a border I replaced the margin of the table to the padding of the div. I created this post not to ask how to get it to work, but really to understand what is happening and why it is happening</p>
  
  <p>Example: <a href="https://jsfiddle.net/jxbmg4vx/1/" rel="nofollow noreferrer">https://jsfiddle.net/jxbmg4vx/1/</a> </p>
  
  <p>Remove the border lines to see what I mean</p>