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