html - 内联 block 的CSS垂直对齐不起作用

Question

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;
}

结果:https://jsfiddle.net/cbukkt3m/1/

为什么它会将周围的文本放在顶部而不是 em 本身？

Answer 1

它与顶部对齐，它被下推:

margin: 1em;
padding: 1em;

尝试删除这些或将它们更改为

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