CSS で外側の表示タイプを inline としたボックスの挙動

Question

CSS の勉強中です。

MDN Web Docs で CSS についての記事 ボックスモデル - ウェブ開発を学ぶ | MDN で以下のようにあります。

ボックスの外側の表示タイプが inline の場合:

1. ボックスは改行されません。
2. width と height のプロパティは適用されません。
3. padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。

リンクに使用される <a> 要素や、<span>、<em> および <strong> はすべて、デフォルトではインラインで表示される要素の例です。

これの3番目の後半部分「他のインラインボックスがボックスから移動することはありません」の意味が分かりません。

通常、外側の表示タイプが block となっている要素の場合、2つ並ぶとそれぞれのブロックの間に改行が挟まります。
しかし、外側の表示タイプが inline となっている要素の場合はそのような改行が挿入されないという意味でしょうか？

Answer 1

1. padding、margin および border が適用されますが、他のインラインボックスがボックスから移動することはありません。

定冠詞がないせいでわかりにくい訳な上に、そもそも不正確ですね。
英語の原文を見ると正確になっているので、そちらを訳すと以下のようになります。

• 縦方向の padding・margin・border が適用されますが、それらが他のインラインボックスの位置を変えることはありません。
• 横方向の padding・margin・border が適用され、それらは他のインラインボックスの配置に影響します。

たとえば padding-bottom:100px を指定しても、次の行との行間は変わりません。が、paading-right: 20px を指定すると、次のインラインボックスとの間が20px広くなります。

Comments

[Mild_Boss]

ありがとうございます。

私の方でも原文を確認しましたが、水平と垂直方向のpaddingなどで影響が違うという重要な情報も和訳時に落ちていたようです。