0

I'm trying to figure out how is the inner div position, when it's displayed as inline-block and the outer div has line-height set.

<!DOCTYPE html>
<html>
<style>
.outer {
    line-height: 20px;
    width: 30px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    width: 20px;
    height: 5px;
    border: 1px solid green;
}

</style>
<body>

<div class='outer'>
    <div class='inner'></div>
</div>

</body>
</html>

https://jsfiddle.net/L4przovt/2/ What is surprising here is the positioning of the inner div. I'd expect it to be on top of the outer div but instead it's somewhere in the middle. Could you explain to me what makes it being positioned in this place?

This is possible duplicate of font-size vs line-height vs actual height but my question seems to be more specific. Please tell me if you think that previous answer should be enough for me.

zlenyk
  • 922
  • 2
  • 7
  • 22

1 Answers1

2

The .inner div is set to display: inline-block. That activates the vertical-align property, which applies only to inline-level and table cell elements.

The default value for vertical-align is baseline. So that's what you're seeing – the inner div aligns to the baseline of the content.

To fix the problem, add this to your code:

.inner {
    vertical-align: top;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701