Div içindeki görüntünün görüntünün altında fazladan boşluk var

Aşağıdaki kodda neden yüksekliği, yüksekliğinden divdaha büyük img? Görüntünün altında bir boşluk var, ancak bir dolgu / kenar boşluğu gibi görünmüyor.

Resmin altındaki boşluk veya fazladan boşluk nedir?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}

<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Varsayılan olarak, görüntü a, b, c ve d ile aynı satırda olacak şekilde satır içi olarak, bir harf gibi işlenir.

Bu çizginin altında g, j, p ve q gibi harflerde bulduğunuz inişler için boşluk var .

Yapabilirsin:

• ayarlamak vertical-alignbaşka yerde konumlandırmak için resmin (örn middle) veya
• displayböylece satır içi değil değiştirin .

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>

Eklenen resim kamu malı ve olduğu kaynaklı Wikimedia Commons

Burada önerilen başka bir seçenek de görüntünün stilinistyle="display: block;"

Hızlı düzeltme:

To resmin altında boşluğu kaldırmak şunları yapabilirsiniz:

• Set vertical-align resmin özelliğini vertical-align: bottom; vertical-align: top;veyavertical-align: middle;
• Görüntünün display özelliğini display:block;

Canlı bir demo için aşağıdaki koda bakın:

#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>

Açıklama: Görüntünün altında neden bir boşluk var?

Resmin altındaki boşluk veya ekstra alan bir hata veya sorun değil, varsayılan davranıştır. Temel neden, resimlerin değiştirilmiş öğeler olmasıdır ( bkz. MDN değiştirilen öğeler ). Bu onların "görüntü gibi davranmak" ve kendi iç boyutları, en boy oranına sahip olmasını sağlar ....
Tarayıcılar display özelliklerini hesaplarlar, inlineancak onları inline-blockelemanlara daha yakın yapan özel bir davranış sağlarlar (dikey olarak hizalayabileceğiniz gibi, bir yükseklik, üst / alt kenar boşluğu ve dolgu, dönüştürür ...).

Bu aynı zamanda şu anlama gelir:

<img>taban çizgisi içermediğinden, resimler dikey hizalama: taban çizgisi ile satır içi biçimlendirme bağlamında kullanıldığında , görüntünün altı metin taban çizgisine yerleştirilir.
( kaynak: MDN , benim vurgu )

Tarayıcılar varsayılan olarak dikey hizalama özelliğini taban çizgisine göre hesaplarken, bu varsayılan davranıştır. Aşağıdaki resim taban çizgisinin metnin neresinde bulunduğunu göstermektedir:

( Görüntü kaynağı )

Taban çizgisi ile hizalanmış öğelerin , yukarıdaki resimde görebileceğiniz gibi taban çizgisinin (gibi ) altına inen inişler için yer tutması gerekir j, p, g .... Bu yapılandırmada, görüntünün altı bu örnekte görebileceğiniz gibi taban çizgisine hizalanır :

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}

<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

<img>Etiketin varsayılan davranışının kapsayıcısının altında bir boşluk oluşturmasının nedeni budur ve dikey hizalama özelliğini veya display özelliğini değiştirmek aşağıdaki demoda olduğu gibi kaldırır:

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>

Ayrıca ebeveynin satır yüksekliğini geçersiz kılabilir:

#wrapper {
  line-height: 0;
}

Tüm düzeltmeler: http://jsfiddle.net/FaPFv/

Tek yapmanız gereken bu özelliği atamak:

img {
    display: block;
}

Varsayılan olarak resimler şu özelliğe sahiptir:

img {
    display: inline;
}

Bu sorun için aşağıdaki gibi çeşitli yöntemler kullanabilirsiniz:

1. kullanma line-height

   #wrapper {  line-height: 0px;  }

2. kullanma display: flex

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

3. Kullanılması display: block, table, flexveinherit

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

Kullandım line-height:0ve benim için iyi çalışıyor.

Display: block kullanarak harika çalışıyor buldum; görüntü üzerinde ve dikey hizalama: üst; metni.

.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>

veya bir JS FIDDLE kodunu düzenleyebilirsiniz

Div'e yeni ekledim float:leftve işe yaradı