Gambar di dalam div memiliki ruang ekstra di bawah gambar

503

Mengapa dalam kode berikut ketinggian divlebih besar dari tinggi img? Ada celah di bawah gambar, tetapi sepertinya itu bukan padding / margin.

Apa celah atau ruang ekstra di bawah gambar?

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

Gambar dengan celah atau ruang putih di bawahnya

Misha Moroshko
sumber
10
Berikut jawaban singkat dan lengkap untuk pertanyaan ini: stackoverflow.com/a/31445364/3597276
Michael Benjamin
1
Berikut ini bacaan yang bagus tentang masalah ini: The Strange <img> Gap In HTML
Matheus Avellar

Jawaban:

601

Secara default, gambar dirender sebaris, seperti huruf sehingga berada pada baris yang sama dengan a, b, c dan d.

Ada ruang di bawah garis itu untuk keturunan yang Anda temukan pada huruf seperti g, j, p dan q.

Demonstrasi keturunan

Kamu bisa:

  • sesuaikan vertical-aligngambar untuk menempatkannya di tempat lain (misalnya middle) atau
  • ubah displayjadi itu tidak sebaris.

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>


Gambar yang disertakan adalah domain publik dan bersumber dari Wikimedia Commons

Quentin
sumber
9
Untuk lebih tepatnya, ini terjadi b / c elemen inline mengambil ruang saat ini line-height. Pengaturan line-heightke dimensi yang diinginkan juga akan mengatasi spasi yang tidak diinginkan.
Kevin Boucher
3
Apakah "f" memenuhi syarat sebagai descender?
j08691
2
@ j08691 - Tergantung pada font.
Quentin
134

Opsi lain yang disarankan di sini adalah mengatur gaya gambar sebagaistyle="display: block;"

Sebuah
sumber
4
Terima kasih. Ini juga memperbaiki masalah serupa dengan ruang di bawah film flash. (menambahkan tampilan: blokir ke embed / tag objek)
jessieloo
5
atau inline-blockjika Anda masih ingin menampilkan inline seperti gambar biasanya.
Ian
6
@Ian @Imperative inline-blocktampaknya tidak berfungsi.
p.matsinopoulos
93

Perbaikan cepat:

Untuk menghapus celah di bawah gambar , Anda dapat:

  • Setel properti penyejajaran vertikal gambar ke vertical-align: bottom; vertical-align: top;atauvertical-align: middle;
  • Setel properti tampilan gambar ke display:block;

Lihat kode berikut untuk demo langsung:


Penjelasan: mengapa ada celah di bawah gambar?

Kesenjangan atau ruang ekstra di bawah gambar bukanlah bug atau masalah, itu adalah perilaku default. Penyebab utamanya adalah bahwa gambar adalah elemen yang diganti ( lihat elemen yang diganti MDN ). Ini memungkinkan mereka untuk "bertindak seperti gambar" dan memiliki dimensi intrinsik mereka sendiri, rasio aspek ....
Browser menghitung properti tampilan mereka, inlinetetapi mereka memberi mereka perilaku khusus yang membuatnya lebih dekat ke inline-blockelemen (karena Anda dapat meluruskannya secara vertikal, memberikan mereka tinggi, margin atas / bawah dan bantalan, mengubah ...).

Ini juga berarti bahwa:

<img>tidak memiliki garis dasar, jadi ketika gambar digunakan dalam konteks pemformatan sebaris dengan garis lurus vertikal: garis dasar, bagian bawah gambar akan ditempatkan pada garis dasar teks.
( sumber: MDN , penekanan tambang )

Karena browser secara default menghitung properti penyelarasan vertikal ke baseline, ini adalah perilaku default. Gambar berikut menunjukkan di mana garis dasar berada pada teks:

Lokasi garis dasar pada teks ( Sumber gambar )

Elemen garis dasar perlu menjaga ruang untuk keturunan yang meluas di bawah garis dasar (seperti j, p, g ...) seperti yang Anda lihat pada gambar di atas. Dalam konfigurasi ini, bagian bawah gambar sejajar pada garis dasar seperti yang Anda lihat dalam contoh ini:

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>


Inilah sebabnya mengapa perilaku default <img>tag menciptakan celah di bagian bawah wadahnya dan mengapa mengubah properti perataan vertikal atau properti tampilan menghapusnya seperti dalam demo berikut:

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>

web-tiki
sumber
Jadi ini sebabnya pengaturan ukuran font ke 0 tidak berfungsi. atau apakah itu
Persijn
2
@ Perijn itu. Menyukai pengaturan line-height:0;tetapi saya tidak menganggap ini sebagai solusi yang baik dibandingkan dengan mengubah properti perataan vertikal atau tampilan
web-tiki
2
Namun, perhatikan bahwa beberapa browser tidak menghormati font-size:0: mereka mengatur ukuran font ke ukuran minimum dalam pengaturan pengguna.
Tn. Lister
Ya sepertinya ruang putih.
mrbengi
baiklah, saya pikir middle text-top sub superposisi dalam gambar tidak benar.
xianshenglu
40

Satu juga dapat membatalkan tinggi garis orangtua:

#wrapper {
  line-height: 0;
}

Semua perbaikan: http://jsfiddle.net/FaPFv/

Pavlo
sumber
5
PERINGATAN! ini juga akan mematikan semua simpul teks di #wrapper. karena akan diwarisi. Tapi poin bonus untuk pemain biola yang luar biasa itu! ini dia diperbarui dengan node teks. jsfiddle.net/FaPFv/30
gcb
Atau, font-size: 0
Kiran
13

Yang harus Anda lakukan adalah menetapkan properti ini:

img {
    display: block;
}

Gambar secara default memiliki properti ini:

img {
    display: inline;
}
Daniel Díaz
sumber
7

Anda dapat menggunakan beberapa metode untuk masalah ini seperti

  1. Menggunakan line-height

    #wrapper {  line-height: 0px;  }
  2. Menggunakan display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
  3. Menggunakan display: block, table, flexdaninherit

    #wrapper img {  display: block;    }
    #wrapper img {  display: table;    }
    #wrapper img {  display: flex;     }
    #wrapper img {  display: inherit;  }
Santosh Khalse
sumber
Tolong jangan rekomendasikan line-heighthack yang sangat ceroboh , atau setidaknya membuatnya jelas, mengapa ini adalah "solusi" terburuk dari semuanya: saat seseorang meletakkan teks di sebelah gambar (terutama multi-line yang telah diformat sebelumnya dengan tag BR), mereka akan menemukan diri mereka dalam situasi yang lebih buruk daripada yang mereka mulai.
Sz.
5

Saya menggunakan line-height:0dan berfungsi dengan baik untuk saya.

Abdulla khan
sumber
Maaf, -1: yang mengacaukan pemosisian teks, jadi jika seseorang juga meletakkan beberapa (terutama multi-line, katakanlah, dengan <BR>) teks di sebelah gambar, mereka akan memiliki kesalahan penempatan, tumpang tindih / overhanging berantakan.
Sz.
3

Saya menemukan ini bekerja sangat baik menggunakan tampilan: blok; pada gambar dan luruskan vertikal: atas; pada teks.

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

atau Anda dapat mengedit kode JS FIDDLE

Timotius
sumber
-1

Saya baru saja menambahkan float:leftdiv dan itu berhasil

TomoMiha
sumber
9
Ini karena pengaturan float:leftpenyebabdisplay:block
Kevin Boucher