Orisun Orisun - 1 year ago 66
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 -->

Answer Source

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.


.small {
  vertical-align: top;

to change this