css - 画像の下の空白を削除

Question

Firefox でのみ、動画のサムネイルで、画像の下部とその境界線の間に 2 ～ 3 ピクセルの不思議な空白が表示されます (以下を参照)。

Firebug で考えられることはすべて試しましたが、うまくいきませんでした。

この空白を削除するにはどうすればよいですか?

画像の下に余白が表示されているスクリーンショット

score 571 · Accepted Answer

imgはデフォルトでインライン要素であるため、ディセンダー (「y」と「p」の下部にぶら下がっているビット) のスペースが表示されています。これにより、ギャップが削除されます。

.youtube-thumb img { display: block; }

score 148 · Accepted Answer

ブロックモードを変更したくない場合は、以下のコードを使用できます。

img{vertical-align:text-bottom}

または、Stuart が提案するように、以下を使用できます。

img{vertical-align:bottom}

score 32 · Accepted Answer

画像をインラインとして保存したい場合は、配置vertical-align: topまたはvertical-align: bottom上に置くことができます。デフォルトでは、ベースラインに合わせて配置されているため、その下にいくつかのピクセルがあります。

score 29 · Accepted Answer

この問題に対するいくつかの異なる解決策をテストするために、 JSFiddleをセットアップしました。の[漠然とした]基準に基づいて

1) 最大限の柔軟性

2) 変な振る舞いをしない

ここで受け入れられた答え

img { display: block; }

多くの人に推奨されている (この優れた記事など) が、実際には 4 位にランクされています。

1 位、2 位、3 位はすべて、次の 3 つのソリューションの間でトスアップです。

1) @Dave Kok と @Hasan Gursoy による解決策:

img { vertical-align: top; } /* or bottom */

長所：

短所：

親と img の両方が「display: inline」を持つ [完全に有効な] ケースでは、このプロパティの値が img の親の位置を決定できます (少し奇妙です)。

2)font-size: 0;親要素の設定:

.parent {
    font-size: 0;
    vertical-align: top;
}
.parent > * {
    font-size: 16px;
    vertical-align: top;
}

これはで必要なのでvertical-align: top、imgこれは基本的に最初のソリューションの拡張です。

長所：

短所：

3)line-height: 0親要素の設定:

.parent {
    line-height: 0;
    vertical-align: top;
}
.parent > * {
    line-height: 1.15;
    vertical-align: top;
}

その点で2番目のソリューションと同様に、完全に柔軟にするために、基本的に1番目の拡張になります。

長所：

短所：

効率の悪いコード。
親と img の両方が `display: inline` を持っている場合、私たちはあらゆる種類のクレイジーになります。(たぶん、`line-height` プロパティをいじるのは最善のアイデアではありません...)

それで、あなたはそれを持っています。これが貧しい魂に役立つことを願っています。

score 7 · Accepted Answer

この問題があった場合、ブロックを追加するだけで使用したくない場合は、他の場所で完璧な解決策を見つけました

img { vertical-align: top }

score 5 · Accepted Answer

5

.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}

于 2012-07-16T15:48:16.260 に答える

score 0 · Accepted Answer

div.youtube-thumbの高さに画像の高さを指定します。これにより、Firefox ブラウザーで問題が発生するはずです。

.youtube-thumb{ height: 106px }

9 に答える 9