title: What is the difference between 'containing block' and 'block container box' in CSS?
body: <p>I am reading CSS specs, the section on <a href="https://www.w3.org/TR/CSS22/visuren.html" rel="nofollow noreferrer">Visual Formatting Model</a> and trying to understand what is the difference between these two terms: <code>containing block</code> and <code>block container box</code>.</p>
  
  <p>What confuses me is the variation of words that are used for what seems to be completely different concepts:</p>
  
  <ul>
  <li><code>box</code> vs <code>block</code>  </li>
  <li><code>containing</code> vs <code>container</code></li>
  </ul>
  
  <p>Is <code>block</code> same as <code>box</code> when talking about visual formatting CSS? If not, what is the difference? Are both of these something that is "visible" on the screen?</p>
  
  <p>In general, how should I think when I see <code>block</code> in the specification? Also what should first come to my mind when I read <code>box</code> in the specs? </p>
  
  <p>Some helpful metaphors or analogies for these concepts would be very helpful to create a mental model.</p>