マージン、ボーダー、パディングを設定したインライン要素の位置がずれる

症状

インラインレベル要素に対してマージン、ボーダー、パディングのいずれかを設定するとボックスの位置がずれてしまう。

マージンを設定
- インラインレベル要素の前後に改行が入る
- インラインレベル要素が1行分、上方向にずれる（本来置かれるべき行の先頭部に移動している）
- 下マージンが設置されてしまう
- 背景の指定が反映されない（たまに反映されることもある）
ボーダーを設定
- インラインレベル要素の前後に改行が入る
パディングを設定
- インラインレベル要素の前後に改行が入る
- インラインレベル要素が1行分、上方向にずれる（本来置かれるべき行の先頭部に移動している）
- 上パディングが設置されない
- 背景の指定が反映されない

例示

<style type="text/css">
span {
  background: aqua;
  font-weight: bold;
}
</style>

<p>前前前
<span style="margin:1em;">マージン</span>
後後後</p>
<p>前前前
<span style="border:2px solid blue;">ボーダー</span>
後後後</p>
<p>前前前
<span style="padding:1em;">パディング</span>
後後後</p>

前前前マージン後後後

前前前ボーダー後後後

前前前パディング後後後

それぞれのプロパティを指定した場合の、表示上の違いを比べています。