5

2つdiv並んでいます。どちらも同じサイズとdisplay: inline-block. 2 つの唯一の違いは、前者にはテキストがあり、後者には空白があることです。

HTML:

<div>1</div>
<div></div>

CSS:

div {
    display: inline-block;
    border: 1px solid black;
    width: 50px;
    height: 50px;
}

最初の div は 2 番目の div よりも低くなります。

&nbsp;2番目のdivにテキストやaを追加するなど、考えられるすべての修正を認識しています。vertical-align: topもちろん、追加するとこれも修正されます。

私が知りたいのは、空白の div がテキストを含む div とは異なる位置合わせをする理由を誰かが説明できますか?

JSFiddle

4

1 に答える 1

9

インライン ブロック ボックスは、既定では、インライン ブロック ボックスのベースラインがレンダリングされるライン ボックスのベースラインに揃えられるように垂直方向に配置されます。

テキストが 1 行のインライン ブロック ボックスのベースラインは、その行のベースラインです。より一般的には、インライン ブロックのベースラインは、含まれるテキストの最後の行のベースラインです。しかし、これは、テキストを含まないインライン ブロックのベースラインがないことを意味します。

このような状況では、フォールバック ルールが適用され、インライン ブロック ボックスの下部がそのライン ボックスのベースラインに配置されます。

于 2013-06-19T20:55:44.350 に答える