disappears when display is set to inline

Question

Here is my code:

The divs reappear when display: block; is uncommented.

Please help explain why this is happening.

I thought they would always take up space since they have their height and width specified. Please explain why this is not the case.

#box-container {
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
    display: inline;
    /* display: block; */
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
    display: inline;
    /* display: block; */
  }

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Answer 1

inline-blocks will shrink to their content (the width setting has no effect for inline-blocks, neither does height), and if there is no content, there is nothing to display...

If you add some content - event a non-breaking space entity, as I did below - you will see the inline-blocks:

#box-container {
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
    display: inline;
    /* display: block; */
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
    display: inline;
    /* display: block; */
  }

<div id="box-container">
  <div id="box-1">&nbsp;</div>
  <div id="box-2">&nbsp;</div>
</div>