6

このフィドルを見てくださいhttp://jsfiddle.net/EWUTX/

使用されるスタイルは次のとおりです。

.box { position: relative; display:inline-block;}
.box:after {
    position: absolute;
    width: 100%;
    height: 10px;
    background: green;
    content: '';
    bottom:-10px;
    left:0;
}

divタグではなく、 li要素でスタイルを使用すると、5 ピクセルの小さなギャップが発生します。

f を指定するont-size: 0pxと、ギャップがなくなります。しかし、その後、内のすべてのテキストがli消えます。

のフォントサイズがli大きくなるにつれて、ギャップが広がります。

フォントサイズをハードコーディングせずに、このギャップを取り除くスタイルはありますか?

もう一度いじる: http://jsfiddle.net/EWUTX/

ありがとう

PS: 私は実際に、ユーザーが " started"、" not-started" などのステータスを (クラスを使用して) 指定できる CSS フレームワークを内部的に構築しています。

使用すると、要素の下に小さなバーが異なる色で表示されます。ユーザーは、このクラスを任意の要素で使用できます。

4

2 に答える 2

6

そのギャップは、「p」文字などの行の高さの予約文字の一部です。divに高さを設定しないと、同じギャップが得られます。img のようなインライン要素からそれを削除したい場合は、vertical-align を下に設定できます。

.box img {
    vertical-align: bottom;
}

参照: http://jsfiddle.net/DhTzp/

于 2013-08-21T14:54:18.060 に答える
1

空白を作成するのは画像です。

img{ display: block; }
于 2013-08-21T14:58:28.137 に答える