神祕填充/保證金圖像周圍

請看下面的jsfiddle：http://jsfiddle.net/Leng/kQvNH/神祕填充/保證金圖像周圍

任何人都可以解釋爲什麼似乎是一個填充大量（約15像素的上方和下方4PX）左右水平點的每一行？圖像只有2px高。填充從哪裏來？

請注意：

對於我來說，圖像周圍的這片神祕的填充，僅發生，當我開始我的文件與HTML5標題：

<!DOCTYPE html> 
<html>

圖片正常顯示（無填充）當我使用 - 任何其他 - 標頭，如HTML4或此XHTML標題爲網頁：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

所以這似乎是一個HTML5不一致。我想切換到標準的HTML5標題，但這個小小的煩惱正在阻止我這樣做。

感謝您的任何指導。

解決方案：

這裏是用該溶液的jsfiddle：http://jsfiddle.net/Leng/Sn2PC/

img 
{ 
    display:block; 
    margin:0 auto; 
}

這是基於以下克里斯的回答。

請注意，設置font-size：0或line-height：0是而不是的一種解決方案，因爲這樣會顯着地破壞字體大小和行高。

再次，將顯示設置爲阻止並建立自動餘量對於在HTML4或XHTML中完成正常，居中，未填充圖像不是必需的。

HTML5創建了這個「功能」，其中圖像是內聯的，並且將具有基於行高或字體大小的填充。

來源

2013-03-05 Leng

如果你讓他們'浮動：左;'填充被刪除:-) – tborychowski 2013-03-05 22:26:43

我不想液浮圖片，我想相對定位的圖像。 – Leng 2013-03-05 22:27:47

嘗試在div – tborychowski 2013-03-05 22:29:43

我認爲這是因爲img元素是內聯的。將font-size或line-height設置爲小修正。或者，將圖像設置爲display: block並在其上設置高度。

來源

2013-03-05 22:27:25 ChrisC

'display：block'可能是最乾淨的解決方案 – TimPetricola 2013-03-05 22:32:03

謝謝Chris。在這裏，他們正常顯示您的建議：http://jsfiddle.net/yY9rx/ 我不知道爲什麼只需要爲HTML5設置圖像的顯示？對於HTML4或XHTML來說並不是必需的。 – Leng 2013-03-05 22:32:54

我的榮幸，很高興你的工作。 – ChrisC 2013-03-06 19:39:57

您可以添加行高：2px;以#theDiv風格

來源

2013-03-05 22:29:18

您的<img>標記顯示爲INLINED，因此它與正常文本一致。只需將容器的行高更改爲更接近圖像高度的字體大小，字體大小（1px）就可以解決此問題。

因此，爲了解釋填充，圖像周圍沒有填充。它是由用戶代理定義的高度（行高）的文本的空行。

fiddled here

來源

2013-03-05 22:34:56

解決方法是更改顯示以阻止圖像，因爲在您的圖像中也有不必要的填充。看看他們離這個小提琴有多近 - http://jsfiddle.net/yY9rx/ – Leng 2013-03-05 22:38:38

如果你已經添加了一個字體大小：1px，那就可以做到這一點。但是，我們不想混淆字體，這就是我們使用display：block的原因。 – Leng 2013-03-05 22:40:00

你是對的，我忘了字體大小的地方.. – 2013-03-05 22:41:41

神祕填充/保證金圖像周圍

回答

相關問題