CSS：换行符忽略填充？

Question

我不知道为什么会这样......

<div class="inner">
    <em class="wrapper tiny">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et </em>
</div>

.inner应用了简单的左右边距。 em.wrapper标记已应用填充。

我不知道为什么浏览器宽度自动破坏的第二行是忽略.wrapper框的填充？

有关于此的任何想法吗？

Answer 1

默认情况下，em代码为display: inline。尝试将display: inline-block添加到类定义中。

.wrapper {
  /* ... */
  display: inline-block;
}

Answer 2

您的填充设置为0

padding: 0 0.75em

表示填充顶部和填充底部为0px，填充左侧和填充右侧为0.75em。

将该行的CSS更新为：

padding : 0.75em