1. 首頁
  2. 問答
  3. 爲什麼我的圖像與其包含的框之間存在差距？

爲什麼我的圖像與其包含的框之間存在差距？

2008-09-24 57 views
9

當我的瀏覽器渲染下面的測試用例時，圖像下方有一個間隙。從我對CSS的理解中，藍框的底部應觸及紅框的底部。但事實並非如此。爲什麼？爲什麼我的圖像與其包含的框之間存在差距？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head><title>foo</title></head> 
<body> 

<div style="border: solid blue 2px; padding: 0px;"> 

    <img alt='' style="border: solid red 2px; margin: 0px;" 
    src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png" /> 

</div> 

</body> 
</html>

來源

2008-09-24 raldi

回答

19

內聯元素垂直對齊到基線，而不是包含框的底部。這是因爲文本需要在下方有少量空間 - 字母上的尾巴像小寫字母'p'。所以在底部上方有一條假想線，稱爲基線，默認情況下，內聯元素與它垂直對齊。

有兩種方法可以解決這個問題。您可以指定圖像應垂直與底部對齊，也可以將其設置爲塊元素，在這種情況下，不再將其視爲文本的一部分。

除此之外，Internet Explorer有一個HTML解析錯誤，它不會在關閉元素後忽略尾隨的空白，因此如果您遇到Internet Explorer兼容性問題，則可能需要刪除此空白。

來源

2008-09-24 20:01:54 Jim

4

因爲圖像是內聯的，所以它坐落在基線上。嘗試

vertical-align: bottom;

或者，在IE瀏覽器有時如果你有一個圖像周圍的空白你得到的。所以如果你刪除div和img標籤之間的所有空格，那可能會解決它。

來源

2008-09-24 19:43:45

+0

你能解釋一下你的第一句話嗎？爲什麼圖像坐在基線上會造成間隙，爲什麼更改垂直對齊可以解決問題？ – raldi 2008-09-24 19:50:22

+0

吉姆做得很好！ – 2008-09-24 20:42:34

0

刪除標籤之前的換行符，以便它直接跟在標籤之間，而在它之間沒有空白。

我不知道爲什麼，但對於Internet Explorer，這是有效的。

來源

2008-09-24 19:46:50

+0

只是澄清 - 這不適用於FF3 – rcreswick 2008-09-24 19:49:00

1 
display: block

的圖像修復它爲好，但可能打破它在其他方面;）

來源

2008-09-24 19:46:56

+0

任何人都可以驗證/爭議，這打破了其他的事情？ – rcreswick 2008-09-24 19:50:42

3

line-height: 0;父DIV修復了這個對我來說。推測這意味着默認行高不爲0.

來源

2008-09-24 19:52:01 ceejayoz

0

font-size:0;對父DIV是另一個棘手的方法來解決它。

來源

2008-09-24 21:05:55

相關問題

 相關問題