web-dev-qa-db-ja.com

画像の下の空白を削除

Firefoxでは、私のビデオのサムネイルのみが、画像の下部とその境界の間に2〜3ピクセルの不思議な空白を表示しています（下記参照）。

私はFirebugで考えられるすべてのことを運なしで試しました。

どうすればこの空白を削除できますか？

Screenshot displaying white space below image

cssimagewhitespaceborderremoving-whitespace
231
Ryan

デフォルトではimgがインライン要素なので、子孫のためのスペース（ 'y'と 'p'の下にぶら下がっているビット）が見えます。これによりギャップが解消されます。

.youtube-thumb img { display: block; }
475
robertc

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

img{vertical-align:text-bottom}

あるいは、Stuartが示唆しているように以下を使用することができます。

img{vertical-align:bottom}
128
x-freestyler

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

29
Dave Kok

---を設定しました JSフィドル この問題に対するいくつかの異なる解決策をテストする。の[あいまい]基準に基づいて

1）最大の柔軟性

2）変な行動はしない

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

img { display: block; }

これは多くの人々によって推奨されています（ この素晴らしい記事 のように）、実際には4番目にランクされています。

1、2、および3位は、これら3つの解決策の間のすべての組み合わせです。

1）@Dave Kokと@Hasan Gursoyによる解決策：

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

長所：

  • すべての表示値は、親とimgの両方に作用します。
  • それほど奇妙な振る舞いはしません。 imgの兄弟は、あなたが期待するところに落ちます。
  • とても効率的です。

短所：

  • Parentとimgの両方が `display：inline`を持つ[完全に有効な]場合、このプロパティの値はimgの親の位置を決定することができます（少し奇妙です）。

2）親要素にfont-size: 0;を設定します。

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

これはimgにvertical-align: topを必要とするので、これは基本的に1番目の解決策の拡張です。

長所：

  • すべての表示値は、親とimgの両方に作用します。
  • それほど奇妙な振る舞いはしません。 imgの兄弟は、あなたが期待するところに落ちます。
  • Imgの兄弟に関する インライン空白問題 を修正しました。
  • 親とimgの両方が `display：inline`を持っている場合でも、これはまだ親の位置を移動させますが、少なくとも親はもう見ることができません。

短所：

  • 効率の悪いコード.
  • これは「正しい」マークアップを想定しています。 imgがテキストノードの兄弟を持っている場合、それらは表示されません。

3）親要素にline-height: 0を設定します。

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

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

長所：

  • Parentとimgが `display：inline`を持っている場合を除いて、すべての表示の組み合わせにおける最初の2つの解決策のように振る舞います。

短所：

  • 効率の悪いコード.
  • Parentとimgの両方が `display：inline`を持つ場合、あらゆる種類のクレイジーになります。 （おそらく `line-height`プロパティで遊ぶのは最善の考えではありません...）

それであなたはそれを持っています。これが貧しい人々の助けになることを願っています。

23
bowheart

私はこの質問を見つけました、そして、ここでの解決策のどれも私のために働きませんでした。私はChromeで画像の下のギャップを取り除く別の解決策を見つけました。私はCSSのimgセレクタにline-height:0;を追加しなければなりませんでした、そしてイメージの下のギャップは消えました。

この問題が2013年のブラウザでも続くことに夢中です。

10
ZivBK1

この問題を抱えていた、あなただけのブロックを使用したくない場合はどこかに完璧な解決策が見つかりました

img { vertical-align: top }
7
Andrew
.youtube-thumb img {display:block;} or .youtube-thumb img {float:left;}
5
Brynner Ferreira

Divの高さ.youtube-thumbを画像の高さにします。それはFirefoxブラウザの問題を設定するはずです。

.youtube-thumb{ height: 106px }
0
Mahesh

前に述べたように、画像はテキストとして扱われるので、一番下はこれらの厄介な問題に対応するためのものです。最も簡単な解決策は、img display：blockを割り当てることです。あなたのCSSに。

しかし、これはテキストと共に流れる標準的な画像の振る舞いを妨げます。その振る舞いを保ち、スペースを排除する。このようなもので画像をラップすることをお勧めします。

<style>
    .imageHolder
    {
        display: inline-block;
    }
    img.noSpace
    {
        display: block;
    }
</style>
<div class="imageHolder"><img src="myimg.png" class="noSpace"/></div>
0
Mardok