Why the whitespace vanished when I added text in inline-block element?

This is the code when I add a text inside inline-block div.

.block{
  display:inline-block;
}
.box{
  height:300px;
  width:300px;
  background:red;
}
.blue{
  background:blue;
}

<div class="box block">
  <p>hello</p>
</div>
<div class="box blue"></div>

This is the code without any text, inside inline-block div.

.block{
  display:inline-block;
}
.box{
  height:300px;
  width:300px;
  background:red;
}
.blue{
  background:blue;
}

<div class="box block">
</div>
<div class="box blue"></div>

We know that below inline elements, by default a white space is added. The same applies for inline-block elements. But when I input some text within the inline-block element why the whitespace automatically vanishes.

I was thinking to use vertical-align: bottom property. But that lorem5 text did the work by itself. What's the concept behind this??