HTML：在嚴格模式下非常奇怪的間距，原因是什麼？

下面的代碼HTML：在嚴格模式下非常奇怪的間距，原因是什麼？

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div style="width:200px;height:200px;padding:0px;margin:0px;"> 
    <div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;"> 
    <img style="padding:0px;margin:0px;width:200px;height:200px;" src="http://www.google.com/logos/2012/serbia12-hp.jpg"> 
</div> 
</div> 
</body>

的底部有一個很奇怪的紅色邊框，我是不是能夠找出爲什麼這個happnes（都與Chrome和IE）。

enter image description here

如果我使用無效文檔類型一樣（withouth的感嘆號Markt的）

<DOCTYPE html>

它的工作原理？

這是什麼原因？爲什麼圖像與外框的寬度和高度不完全相同（200像素乘200像素）。我嘗試了一切，但不知道爲什麼發生這種情況？這是一個hmtl錯誤還是我做錯了什麼？

側注：這是一個非常複雜的HTML結構。上面的例子沒有意義，但它說明了這個問題。所以如果你能解釋爲什麼會發生這種情況會很好。

非常感謝！

來源

2012-02-23 user1145216

瀏覽器中的默認行間距不會均勻劃分爲200.因爲默認情況下<img>顯示爲inline，所以它會考慮行間距。你看到了這個結果。

將<img>設置爲display: block;將解決您的問題。

來源

2012-02-23 05:17:34 Interrobang

感謝您的幫助。如果您可以陳述我可以搜索的某些「條款」或指向此主題的鏈接，這將非常友善和優秀。我還不明白爲什麼一個高度爲200px的內聯元素仍然會考慮行間距......謝謝 – user1145216 2012-02-23 05:25:56

下面是一個真實世界的例子：http://www.campaignmonitor.com/blog/post/3132/how-to- stop-gmail-from-adding-a-margin-to-your-images/ – Interrobang 2012-02-23 05:29:13

@ user1145216，發生這種情況的原因是內聯元素必須允許下面的空格用於像j，q，p，y等小寫字母。適合在同一條線上。將它們更改爲塊級元素可消除對該額外空間的需求。 – Sparky 2012-02-23 06:01:50

看起來像你在white-space bug位。有兩種解決方案：

取出img周圍的白色空間：

<div style="background-color:red;position:relative;display:block;text-decoration:none;padding:0px;margin:0px;"><img style="padding:0px;margin:0px;width:200px;height:200px;" src="http://www.google.com/logos/2012/serbia12-hp.jpg"></div>
或者你可以在div包裝添加font-size: 0;到您的內聯樣式圍繞img

另外，在上陳述是多餘的，你不需要那裏。

來源

2012-02-23 05:03:54 creanium

你好，謝謝你的回答。刪除任何空格，是我嘗試過的許多事情之一。它沒有解決它，問題仍然存在，將所有內容都放在一行中，沒有任何空格......文本大小0也不起作用（我只是猜測這個）。這是一個奇怪的行爲.... – user1145216 2012-02-23 05:08:49

我剛剛更新了評論，我有錯誤的CSS。當我的意思是'font-size：0'時，我最初寫了'text-size：0';'我總是把那個弄亂了。無論如何，我只是在[jsFiddle]（http://jsfiddle.net/tM7HR/）中測試它，它確實擺脫了底部的紅色條。如果你去那小提琴，你可以刪除'font-size：0'並看到紅條回來。 – creanium 2012-02-23 05:12:50

請參閱@ Interrobang關於行間距的評論。他的解釋比我做得更好。 – creanium 2012-02-23 05:20:09

發生這種情況的原因（我的猜測是它是規範）是圖像與文本的基線對齊。如果你把一些文字與伸（字母形式的底部莖）你會看到它完全適合...

http://jsfiddle.net/LvLPE/

一個簡單的辦法是告訴瀏覽器來處理圖像與display: block;一個div。

來源

2012-02-23 05:29:56 Duopixel

HTML：在嚴格模式下非常奇怪的間距，原因是什麼？

回答

相關問題