0

このリンクを見てください: LINK

ご覧のとおり、それぞれのサイズが 20x20(px) の赤い div のマトリックスです。それらの間にスペースがあってはなりませんが、行の間に白い線があります。を使用したためだと思いますdisplay:inilne-block;。これを行う他の方法はありますか？そもそもなぜ彼らはそこに現れるのですか？

.red {
    background: none repeat scroll 0 0 red;
    border: 0 none;
    display: inline-block;
    height: 20px;
    line-height: 0;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 20px;
}
4

2 に答える 2

2

floatを宣言すると、表示プロパティもサイレントに設定されるため、使用は機能しますblock(Chrome インスペクターからの以下の画像を参照してください。

クロームインスペクター

あなたが見ているギャップは、あなたが使用しているためですinline-block。これは (私が信じている) 'p' や 'q' などの文字のディセンダー用に予約されているスペースです。キーはvertical-alignプロパティで、デフォルトでは に設定されていますbaseline。それを別のもの（top、bottom）に設定すると、ギャップが削除されます（このフィドルを参照）。

したがって、floatそれが目的に合っている場合は使用しますが、 の他の利点が必要な場合はinline-block、宣言された垂直方向の配置でそれを使用してください。

于 2013-04-04T09:50:30.847 に答える
0

これを試して：

background: none repeat scroll 0 0 #F00;
border: 0 none;
display: block;
height: 20px;
line-height: 0;
margin: 0;
outline: 0 none;
padding: 0;
width: 20px;
float: left;

表示属性を変更します。ブロックして左にフロート！

于 2013-04-04T10:24:32.720 に答える