為什么在下面的代碼中div的高度大于img的高度？圖像下方有一個(gè)間隙，但似乎不是填充/邊距。

圖像下方的間隙或額外空間是什么？

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

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

默認(rèn)情況下，圖像是內(nèi)聯(lián)呈現(xiàn)的，就像一個(gè)字母，所以它位于a、b、c和d所在的同一行。

在那條線下面有一個(gè)空間，你可以在字母g、j、p和q上找到它的下行字母。

您可以:

調(diào)整圖像的垂直對(duì)齊，將其放置在其他位置(例如中間)或 更改顯示，使其不內(nèi)嵌。

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>

這篇博文中建議的另一個(gè)選項(xiàng)是將圖像的樣式設(shè)置為style = & quot顯示:塊；"

要移除圖像下方的間隙，您可以:

將圖像的vertical-align屬性設(shè)置為vertical-align:bottom；垂直對(duì)齊:頂部；或垂直對(duì)齊:居中； 將圖像的顯示屬性設(shè)置為display:block； 請(qǐng)查看以下代碼進(jìn)行現(xiàn)場(chǎng)演示:

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

也可以取消父行的高度:

#wrapper {
  line-height: 0;
}

所有修復(fù):http://jsfiddle.net/FaPFv/

您所要做的就是分配這個(gè)屬性:

img {
    display: block;
}

默認(rèn)情況下，圖像具有以下屬性:

img {
    display: inline;
}

您可以使用幾種方法來解決這個(gè)問題，例如

使用行高

#wrapper {  line-height: 0px;  }

使用顯示器:flex

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

使用顯示:塊、表、伸縮和繼承

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

我使用行高:0，它對(duì)我來說很好。

我發(fā)現(xiàn)使用display:block效果很好；在圖像上垂直對(duì)齊:top在文本上。

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

我只是在div中添加了float:left，它工作了

還可以設(shè)置溢出:隱藏；，并將圖像的高度增加到& gt100%.身高:100%；