0

この JSFiddle を見てください: http://jsfiddle.net/nMbb4/1/

HTML:

<table>
    <tr>
        <td>
            1
        </td>
    </tr>
    <tr>
        <td>
            <div></div>
        </td>
    </tr>
</table>

CSS:

table, tr, td
{
    padding:0px;
    margin:0px;
    border:solid 1px black;
    font-size:10px;
}
table
{
    border-collapse:collapse;
}

td
{
    width:15px;
}

div
{
    width:15px;
    height:15px;
    display:inline-block;
    background-color:orange;
}

テーブル セルの下部に白いマージン/パディングがあるのはなぜですか? どうすればそれを取り除くことができますか? ここでの目標は、div の背景色をオレンジ色にして表のセル全体を埋めることです。

4

4 に答える 4

3

display:inline-blockdiv の周りに空白が残っているため、そのプロパティを削除する必要があります。displayプロパティを削除divすると、必要な出力が正確に設定されます。

フィドルのデモ

それinline-blockでも信じられないほど便利ですが、開発者がそれを使用することで発生するスペースを処理する方法を知っていることが重要です。

補足:アイテムがinline-blockマークアップ内のキャリッジ リターンまたはタブとして表示される場合、空白文字として認識されます。その場合は、項目間にスペースを入れずにマークアップを記述することで、この問題を解決できます。

于 2013-12-30T16:08:07.017 に答える
3

そのスペースから抜け出すには、デフォルトvertical-alignのベースラインを変更できます`<div>

div {
 display:inline-block;
 vertical-align:top; /*or middle or bottom*/
}

デモhttp://jsfiddle.net/nMbb4/6/

于 2013-12-30T16:20:40.187 に答える
1

display-inlinediv のスタイルを 削除する

フィドル

于 2013-12-30T16:07:50.923 に答える