css - CSS：换行符忽略填充？

Question

我不知道为什么会这样……</p>

<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

表示 padding top 和 padding bottom 为 0px，padding left 和 padding right 为 0.75em。

将该行 CSS 更新为：

padding : 0.75em