爲什麼我無法擺脫此圖片下方的空間？

我在過去的幾個小時裏一直在努力，我放棄了。我無法弄清楚這一點。爲什麼我無法擺脫此圖片下方的空間？

我有一個圖像（標題徽標），其次是導航欄。圖像下方有一個2-3像素的空間。我已經系統地消除了外部引用的CSS的每一點，然後添加了一些內聯CSS來嘗試解決問題。這就是我現在所擁有的：

<html lang='en'> 
     <head> 
      <meta charset='utf-8' /> 
      <title>Sci-fi's Big Mistake</title> 
     </head> 

     <body style='margin:0px; padding:0px; border:1px solid green;'> 


      <img src='/images/farscape.jpg' alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br> 
      <span style='border:1px solid blue;margin:0px; padding:0px; '>text</span> 
      <ul id='menu' class='gold' style='margin:0px; padding:0px; border:1px solid red;'> 
       <li><a href='#'>Home</a></li> 
       <li class='active'><a href='#'>About</a></li> 
       <li><a href='#'>Services</a></li> 
       <li><a href='#'>Products</a></li> 
       <li><a href='#'>Contact</a></li> 
       </ul> 




Shouldn't have cancelled this. 
</body></html>

這裏的頁面截圖，和我所看到的我的系統上（贏，XP，在IE8相同以及FF 13）

http://picturepush.com/public/8737985

來源

2012-07-16 a coder

是否有任何外部樣式表？ – Anagio 2012-07-16 03:29:25

沒有外部CSS。 – 2012-07-16 05:26:09

你知道了。

http://jsfiddle.net/dennym/XBdfk/

刪除了<br>，並添加了display:block到你的形象。空間不見了。

問題是<br>它有一個最小保證金，我不能刪除...我猜。此外，您還必須將display:block添加到圖像中，以便文字顯示在底部。

（還刪除了在你的引號一個小錯誤）

來源

2012-07-16 13:54:07

我使用Mac OS X/Chrome沒有任何差距。我的猜測是，您的瀏覽器正在設置跨度爲1以外的行高。

嘗試使用重置樣式表，http://meyerweb.com/eric/tools/css/reset/。此外，Firebug可輕鬆讓您將鼠標懸停在元素上，以查看指定填充位置的元素大小。

來源

2012-07-16 03:25:44

圖像標記代碼不正確，因此樣式沒有服用影響你沒有關閉alt屬性，你應該使用雙引號

<img src='/images/farscape.jpg' alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>

您可能還需要刪除<br>和在圖像上設置display:block;

來源

2012-07-16 03:53:04 Anagio

這可能是一個類型o複製。這是一個開發（對世界而言是私有的）網站，但我會張貼代碼（與上面相同，但我會先刪除實際的客戶端內容和文本，如上所示）。 – 2012-07-16 05:27:16

確認缺少的報價實際上存在於現場。我從來沒有見過使用雙引號導致隨機間距的地方。我使用單打，這樣我就可以雙引用PHP中包含所有HTML的變量，然後回顯到屏幕。我更喜歡將變量嵌入到雙引號中，而不是「斷開」。 $ up。 '內容'用單引號。 – 2012-07-16 05:30:25

如果理解正確的話，這個問題是一個事實，即圖像如文本不僅是內聯元素，但也被認爲是「文」引起的。文字是用基線書寫的。大多數字母在這個基線上對齊，但有些不像j，g和y。因此，在渲染文本時，空間的一些像素被包括在底部以下的基線之下。您可以通過添加

line-height:0px;

對圖片標記把這一關。

這幅圖像等於字母想法的另一個奇怪結果是，應該並排排列的圖像顯示出一個缺口。確實：字母之間有空格！您可以通過添加到中小企業的圖片標籤解決這個問題：

font-size:0px;

另一種方法來解決你提到將作出這樣的標題圖片一個div的背景圖像具有相同尺寸的這個問題。 Div的只是容器，沒有類似字體的屬性。

希望這會有所幫助！

來源

2014-02-13 11:14:56

爲什麼我無法擺脫此圖片下方的空間？

回答

相關問題