CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10390

CSS vertical align of inline-block not working

HTML:

<div id='inner'>I am sam <em>I am em</em> I am sam</div>

CSS:

#inner {
    width: 400px;
    height: 400px;
    background-color: cyan;
}

em {
    margin: 1em;
    padding: 1em;
    display: inline-block;
    vertical-align: top;
}

Result: https://jsfiddle.net/cbukkt3m/1/

Why does it throw the surrounding text to the top and not the em itself?

Upvotes: 0

Views: 75

Answers (1)

Pixelomo
Pixelomo

Reputation: 6737

It is aligned to the top, it's being pushed down by:

margin: 1em;
padding: 1em;

try removing these or changing them to

margin: 0 1em;
padding: 0 1em;

Upvotes: 1

Related Questions