爲什麼一個簡單的圖像得到一個邊緣底部c.q.輸出空間下的圖像？

請查看this simple jsfiddle。它包含以下代碼：爲什麼一個簡單的圖像得到一個邊緣底部c.q.輸出空間下的圖像？

<div style="background:yellow; display:inline-block;"> 
    <img src="http://www.wedesoft.de/test/test.png" /> 
</div>

正如您所見，這將在圖像下方輸出一個空格，以便您可以看到黃色的容器。我不知道爲什麼，因爲沒有定義空間。

有人可以告訴我發生了什麼事嗎？

來源

2014-09-23 user3631654

http：// stackoverflow的可能重複。com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image或[刪除圖片下方的空白處]（http://stackoverflow.com/questions/） 7774814/remove-white-space-below-image） – 2014-09-23 11:44:40

-1

出於某種原因

display:block;

解決了這個問題，因爲你可以接受的答案，請參閱： Remove white space below image

目前還看不知道爲什麼...

來源

2014-09-23 11:49:59 user3631654

這是由於line-height屬性造成的;試試這個Jsfiddle 如果我只設置行高爲0

來源

2014-09-23 11:47:53 Azrael

謝謝。這也解決了問題 – user3631654 2014-09-23 11:50:26

@ user3631654確保爲未來的訪問者標記一個awnser;） – Azrael 2014-09-23 11:51:29

圖像是一個inline元素。這意味着它被視爲文本。文字有line-height。 line-height是造成底部空間的原因。有多種方法可以解決這個問題。

以下是我的最愛：

div { 
    line-height: 0; 
}

通過設置line-height爲0，空間消失。

img { 
    display: block; 
}

通過使圖像的block元素，它不再被認爲是文本，因此，line-height是不適用了。

正如馬克Audet在評論中指出，另一種方式來解決，這將是通過使用vertical-align。

img { 
    vertical-align: top; 
}

不要緊，您是否使用top或bottom。

來源

2014-09-23 11:50:31

你可能想提一下，應用'vertical-align：top或bottom'也可以解決這個問題。 – 2014-09-23 11:53:01

@Danko刪除'inline-block'不會解決問題，因爲圖像將保持「inline」狀態，這是造成問題的原因。你可以打開[這個小提琴]（http://jsfiddle.net/v6uLbsry/3/），看看它不會改變底部的房間。 @Marc Audet：我會更新我的答案。謝謝。 – 2014-09-23 11:59:14

我想你錯過line-height試試這個

<div style="background:yellow;display:inline-block;line-height: 0px;"> 
 
    <img src="http://www.wedesoft.de/test/test.png"> 
 
</div>

你可以申請風格display: block;到IMG其他方式。像

<div style="background:yellow;display:inline-block;"> 
 
    <img src="http://www.wedesoft.de/test/test.png" style="display: block;"> 
 
</div>

來源

2014-09-23 11:51:08

-1

藉此網站上看看的line-height歡迎使用屬性：http://www.w3schools.com/cssref/pr_dim_line-height.asp

basicly發生的事情是，有一個在DIV一些默認的空間，所以這就是爲什麼你看到的黃線。添加line-height: 0px;應該可以解決問題。

-bertri

來源

2014-09-23 11:52:37

爲什麼一個簡單的圖像得到一個邊緣底部c.q.輸出空間下的圖像？

回答

相關問題