Orisun Orisun - 6 months ago 7
HTML Question

Why does this text move my div?

I have a grid of white divs with a green div behind
(like this).
I am trying to put text in each div, but for some reason, when I give a div text, that div is shifted down (like this). What css property/ HTML technique can I use to make the divs stay in place while still holding text?

The HTML consists of a div with this CSS:

#main {
top: 50px;
height: 280px;
width: 100%;
background-color: green;
position: fixed;
}


which contains divs with this CSS:

.small {
position: relative;
background-color: white;
border: 4px solid black;
width: 5%;
height: 80px;
display: inline-block;
margin-top: 2px;
}


and looks like this:

<div id="main">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<!-- etc -->
</div>

Answer

They are aligned at their baseline. If there is text, that's the baseline of the text, if not, it's near the bottom of the container.

Add

.small {
  vertical-align: top;
}

to change this