Exploring the world of CSS and HTML, I noticed a curious change in the output when text is added inside a div tag.
First:
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override height later */
background-color: teal;
margin-right: 2px;
}<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 result showcases four bars aligned horizontally.
Second:
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override height later */
background-color: teal;
margin-right: 2px;
}<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 outcome remains consistent, but this time displayed upside down.
I'm eager to learn the reasoning behind this behavior. Can you shed some light on it?