Line height moves adjecent div from the top

Question

Why line hight of <div> - "second" affects div"one" by moving it from the top? jsfiddle.net

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

CSS:

a {
display: inline-block;
}

a.one {
height:3em;
border: 1px solid black;
}

a.two {
line-height:3em;
border: 1px solid black;
enter code here
}

RESULT:

Result

http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward — G.L.P, Mar 25 '15 at 11:46

score 0 · Accepted Answer · answered Mar 25 '15 at 11:48

Because they are inline blocks, and siblings. The solution could be, to apply inline-block property to just the second div, so the first div wont get height relative to its sibling block.

see this Fiddle

a.two {
    display: inline-block;
   
}

a.one {
    height:3em;
    border: 1px solid black;
}

a.two {
    line-height:5em;
    border: 1px solid black;
}

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

Or if you still okay with the height increased and just want to move the first div upwards you can set vertical-align:top for anchor

a {
  display: inline-block;
  vertical-align: top;
}
a.one {
  height: 3em;
  border: 1px solid black;
}
a.two {
  line-height: 5em;
  border: 1px solid black;
}

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

Or if you want the element div.one to have no change in line-height and still want to let it stuck the top, just combine both the solutions: Fiddle

a.two {
  display: inline-block;
  vertical-align: top;
}
a.one {
  height: 3em;
  border: 1px solid black;
}
a.two {
  line-height: 5em;
  border: 1px solid black;
}

<a href="#" class="one">vienas</a>
<a href="#" class="two">du</a>

Line height moves adjecent div from the top

1 Answers1