3

inline-block <span>要素内の要素を垂直方向に揃えることができません<td>(デフォルトdisplay: table-cellのスタイルがあります)。

どちらの要素もサイズが固定されてい<td> is 24px tall and so is theます。

どちらの要素にもマージンやパディングがないため、両方の要素のレンダリング サイズが同じであることが期待されます。ただし、<td>予想よりも背が高いようで、その理由はわかりません。

このjsfiddleの例。

それがなぜ起こるのか、そしてそれを「修正」する方法を知っていますか？

4

2 に答える 2

7

font-size:0td クラスに追加

td {
    height: 24px;
    vertical-align: middle;
    background-color: red;
    margin: 0;
    padding: 0; font-size:0
}

更新されたデモhttp://jsfiddle.net/NxmhC/1/

于 2012-09-26T10:37:57.030 に答える
2

スパンを揃える:

span.foo {
    display: inline-block;
    height: 24px;
    width: 16px;
    background-color: lime;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
于 2012-09-26T10:54:21.660 に答える