Why does putting text in an element push the element down?

Asked Mar 12 '15 at 14:50

Active Mar 12 '15 at 14:50

Viewed 26 times

Minimal example, just 2 divs:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        display:inline-block;
        width:50px;
        height:50px;
        background-color:yellow;
      }
    </style>
  </head>
  <body>

    <div>whoa</div>
    <div></div>

  </body>
</html>

Plunker here

enter image description here

What is the empty space above the first div? Why? How do I align them both to the top of the page, regardless if there is text in them?

asked Mar 12 '15 at 14:50

tenfour

36,141
15
83
142

4

See http://stackoverflow.com/q/19366401/2680216 – Josh Crozier Mar 12 '15 at 14:51
add `vertical-align:top;` – marsh Mar 12 '15 at 14:53
[plunker](http://plnkr.co/edit/b0a6ucEl4RASc3DGwM6e?p=preview) – Dhaval Marthak Mar 12 '15 at 14:53
Interestingly, this question is the polar opposite of [this one](http://stackoverflow.com/questions/27293843/why-does-an-inline-block-align-to-top-if-it-has-no-content). – BoltClock Mar 12 '15 at 14:55

Why does putting text in an element push the element down?

0 Answers0