Why this is happening?

i was playing with SVG and not sure why the output change when i add text on a div tag.

First:

<style type="text/css">
  div.bar {
   display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override height later */
    background-color: teal;
    margin-right: 2px;
}
</style>
<div class="bar" style="height: 15px;"></div>
<div class="bar" style="height: 20px;"></div>
<div class="bar" style="height: 25px;"></div>
<div class="bar" style="height: 30px;"></div>

The output is four bars.

Second:

<style type="text/css">
  div.bar {
   display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override height later */
    background-color: teal;
    margin-right: 2px;
}
</style>
<div class="bar" style="height: 15px;">15</div>
<div class="bar" style="height: 20px;">20</div>
<div class="bar" style="height: 25px;">25</div>
<div class="bar" style="height: 30px;">30</div>

The output is the same but upside down.

Hope that you can tell me why.

Thanks in advance! G.