Question:

Code

.outer {
    display: block;
    background: lightblue;
    font-size: 50px;
}

.inner {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
    vertical-align: middle;
}

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

You can play and see the result here: https://jsfiddle.net/y1jkw3nu/5/

Problem

I have this weird empty space above the red square.

Question

Can someone explain to me where does this empty space come from? I understand that it’s because of font-size: 50px, but the .inner div have vertical-align: middle. Doesn’t it mean it should be positioned in the middle of the line?

Answer:

Thats because the ‘content’ inside reserves height for the text that could be there… put line-height:0 and its gone..

.outer {
    display: block;
    background: lightblue;
    font-size: 50px;
line-height:0;
}

.inner {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
    vertical-align: middle;
}

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

If you have better answer, please add a comment about this, thank you!

Resolved: White space above a vertically aligned inline-block element

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Resolved: Why doesn’t stringstream consume output during hex formatting?

Leave A Reply