web-dev-qa-db-ja.com

divの中の画像は画像の下に余分なスペースがあります

に続くコード で、なぜdivの高さがimgの高さよりも大きいのでしょうか。画像の下には隙間がありますが、余白はありません。

画像の下の隙間や余分なスペースは？

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Image with a gap or white space under it

htmlcssimage
431
Misha Moroshko

デフォルトでは、画像は文字のようにインラインでレンダリングされます。

A、b、c、dと同じ行にあります。

その線の下には、f、j、p、qのような文字で見つけた子孫のためのスペースがあります。

画像の vertical-align を調整して他の場所に配置したり（middle）、インラインにならないようにdisplayを変更することができます。

505
Quentin

ここで提案されている別のオプションは、画像のスタイルをstyle="display: block;"に設定することです。

125
Thea

クイックフィックス：

画像の下の隙間を取り除くには、次のことができます。

  • 画像の vertical-align プロパティをvertical-align: bottom;vertical-align: top;またはvertical-align: middle;に設定します
  • 画像のdisplayプロパティをdisplay:block;に設定します

ライブデモについては、次のコードを参照してください。

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

説明：画像の下に隙間があるのはなぜですか。

画像の下の隙間や余分なスペースはバグや問題ではありません、それはデフォルトの動作です。根本的な原因は、画像が要素に置き換えられることです（MDN および W3Cを参照）。これは、彼らが「画像のように振舞う」ことを可能にし、そしてそれら自身の固有の寸法、アスペクト比を持つことを可能にする。
ブラウザはdisplayプロパティをinlineに計算しますが、それらはinline-block要素に近づけるような特別な振る舞いをします（縦方向に並べることができるので、高さ、上下余白、余白を入れて変換します... ）.

これは次のことも意味します。

[...]画像がvertical-align：baselineのインラインフォーマットコンテキストで使用されている場合、画像の下部はコンテナのベースライン上に配置されます。 （出典： MDN 、私の強調）

ブラウザはデフォルトでベースラインに対するvertical-alignプロパティを計算するので、これがデフォルトの動作です。次の図は、テキスト上のベースラインの位置を示しています。

Location of the baseline on text

上の画像でわかるように、ベースラインに揃えられた要素は 子孫 のためにベースラインより下に伸びるスペースを保つ必要があります（j, p, g ...のように）。この設定では、この例でわかるように、画像の下部がベースライン上に配置されています。

div{border:1px solid red;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

これが、<img>タグのデフォルトの振る舞いがコンテナの下部にギャップを作る理由であり、vertical-alignプロパティまたはdisplayプロパティを変更すると次のデモのようにそれが削除される理由です。

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
84
web-tiki

親の行の高さを無効にすることもできます。

#wrapper {
  line-height: 0;
}

すべての修正： http://jsfiddle.net/FaPFv/

36
Pavlo

このプロパティを代入するだけです。

img {
    display: block;
}

画像はデフォルトでこのプロパティを持っています。

img {
    display: inline;
}
9
Daniel Díaz

あなたはこの問題のためにいくつかの方法を使うことができます。

  1. line-heightを使う

    #wrapper {  line-height: 0px;  }

  2. display: flexを使う

    #wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

  3. display:block、table、flex、およびinheritの使用

    #wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }
6
Santosh Khalse

私はそれがdisplay：blockを使ってとてもうまくいくことがわかりました。画像上で、垂直方向に揃えます。テキスト上。

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}
<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

あるいは、コードを編集することもできますa JS FIDDLE

3
Timothy

私はline-height:0を使いました、そしてそれは私のためにうまく働きます。

3
Abdulla khan