☰

div内の画像の下に余分なスペースがあります 質問する

tag-icon • tag-icon html css image
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>

下に隙間や空白がある画像

ベストアンサー1

デフォルトでは、画像は文字のようにインラインでレンダリングされ、a、b、c、d と同じ行に配置されます。

その線の下には下降者g、j、p、q などの文字に見られます。

ディセンダーのデモンストレーション

あなたはできる：

  • 調整するvertical-align画像の別の場所（例えばmiddle）に配置するか、
  • displayインラインにならないように変更します。

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}
<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

含まれている画像はパブリックドメインであり、ソースウィキメディア・コモンズより

おすすめ記事