Robert Rocha Robert Rocha - 8 months ago 30
CSS Question

CSS vertical align of inline-block not working


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


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

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


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


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;