html - 意味 - div内の画像に画像の下に余分なスペースがあります




images 意味 (6)

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

画像の下の空白や余分なスペースは何ですか?

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


クイックフィックス:

イメージの下のギャップ削除するには 、次の操作を実行します。

  • 画像のvertical-alignプロパティをvertical-align: bottom; vertical-align: top; またはvertical-align: middle;
  • 画像の表示プロパティを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>

説明:イメージの下にギャップがあるのはなぜですか?

イメージの下の空白や余分なスペースはバグでも問題でもなく、デフォルトの動作です。 根本的な原因は、イメージが置き換えられた要素であることです( vertical-alignW3C参照 )。 これにより、「イメージのように行動する」ことができ、固有の次元、アスペクト比を持つことができます。
ブラウザはinline表示プロパティを計算しますが、 inline-block要素に近づけるような特別な動作を与えます(縦に並べ、高さ、上/下マージン、パディング、変形などを行うことができます)。

これはまた、次のことを意味します。

[...] vertical-align:baselineのインライン書式設定コンテキストで画像を使用すると、画像の下端がコンテナのベースラインに配置されます。 ( 出典: W3C 、強調鉱山

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

ベースライン整列要素は、上記の画像で見られるように、基底線( j, p, g ...ような)の下に伸びるdescendersためのスペースを維持する必要があります。 この構成では、次の例のように、イメージの下部がベースライン上に配置されます。

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>


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

  1. line-heightを使用する

    #wrapper {  line-height: 0px;  }
    
  2. display: flexを使うdisplay: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
    
  3. display: blocktableflex 、およびinherit

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

もう一つの選択肢は、画像のstyle="display: block;"設定することhere style="display: block;"


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

それは、a、b、c、dが座る同じ行に座っている。

f、j、p、qのような文字で見つかったディセンダーのために、その行の下にスペースがあります。

イメージのvertical-alignを調整して、他の場所( middle )に配置したり、インラインでないようにdisplay変更しdisplayすることができます。


私はline-height:0を使用し、それは私のために正常に動作します。


私はそれが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>

またはJS FIDDLEコードを編集することができます





image