不需要間距1.0嚴格

Question

我的目標是使用XHTML 1.0嚴格的DOCTYPE本頁我的工作，但我遇到一些奇怪的設計問題..

我有以下代碼：

<div><img src="photos/someimage.jpg" alt="Title" /></div> 

當我加載DOCTYPE設置爲1.0嚴格的頁面時，在圖像下面，在div內添加一點點間距。我刪除了代碼中的所有空白/換行符，這似乎是這類問題的常見罪魁禍首。如果我將DOCTYPE更改爲1.0 Transitional，則間距消失，頁面看起來應該如此。

任何人都知道的方法來避免這個問題，同時仍然使用1.0嚴格？

謝謝你的時間！

Answer 1

http://www.schoonzie.com/rogue-padding-below-images

如果內嵌顯示圖像，它的葉子下面有個輕微的空間。這是因爲圖像放置在文本的基線上，並且在基線下方應該有更多的空間用於像g，j或q這樣的下行字符。

分支是在嚴格模式下不可能使容器緊緊貼合圖像，除非你明確地說img {display：block}。

https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

其他主要的選擇是離開圖像內聯和相對於所述線框改變圖像的垂直對準。例如，您可以嘗試以下操作：

div img {vertical-align: bottom;} 

Answer 2

試試這個

<div style="font-size: 0px;"><img src="photos/someimage.jpg" alt="Title" /></div>