1

I have two DIVs placed side by side with the following code.

body {
    margin: 0;
}

#foo {
    background: orange;
    width: 50%;
    height: 100px;
    display: inline-block;
}

#bar {
    background: lightblue;
    width: 50%;
    height: 100px;
    display: inline-block;
}
<div id="foo">
    <span>Foo</span>
</div><div id="bar">
    <span>Bar</span>
</div>

This works fine. Now if I vertically center-align the text in only the first DIV (the orange one), the two DIVs are no longer aligned with each other. Here is the code.

body {
    margin: 0;
}

#foo {
    background: orange;
    width: 50%;
    height: 100px;
    display: inline-block;
    line-height: 100px;
}

#bar {
    background: lightblue;
    width: 50%;
    height: 100px;
    display: inline-block;
}
<div id="foo">
    <span>Foo</span>
</div><div id="bar">
    <span>Bar</span>
</div>

Just adding line-height property to the first DIV has caused the second DIV to move down. It appears that the baseline of the text in both DIVs are aligned together and as a result the second DIV has moved down. I know it can be fixed by setting vertical-align: top for the second DIV or setting the line-height property for the second DIV as well.

But in this question, I want to know why has the second DIV moved down for the second code sample. If you can quote relevant parts of the CSS standard that explains this, it will be helpful.

Lone Learner
  • 18,088
  • 20
  • 102
  • 200
  • 1
    Have a look at: http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward/9289377#9289377 – Hashem Qolami Sep 25 '14 at 19:18
  • 1
    It vertically aligns based on the baseline (the virtual horizontal line on which the text stands) of the text by default – ckuijjer Sep 25 '14 at 19:20

0 Answers0