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ブラウザの幅によって2行目が自動的に分割され、ボックスのパディングが無視されている理由がわかりません。

それについて何かアイデアはありますか？

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