CODEWITHSUNDEEP
htmlcss
Orisun
Orisun

Reputation: 19

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>

Upvotes: 2

Views: 84

Answers (1)

Johannes
Johannes

Reputation: 67799

They are aligned at their baseline. If there is text, that's the baseline of the text (i.e. of the last line of text), if not, it's near the bottom of the container.

Add

.small {
  vertical-align: top;
}

to change this.

Here's a codepen: http://codepen.io/anon/pen/oxVajG

Upvotes: 3

Related Questions