使用圖像時不可拆除的底部邊距（使用圖像時）

我想要編寫一個簡單的代碼：圖像在邊框之間沒有空格的div中，但不知何故，我總是會得到一個底部邊距（或填充取決於您希望如何看到它）。我試圖把margin和padding設置爲0，但它不會改變任何東西。使用圖像時不可拆除的底部邊距（使用圖像時）

下面是代碼：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Sandbox</title> 
     <style> 
      *{margin:0;padding:0;} 
      div{ 
       background:red; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <img src="image.jpg"/> 
     </div> 
    </body> 
</html>

我試了兩個瀏覽器已經器（Chrome，傲遊）沒有運氣。它是在說明書中還是所有的網絡瀏覽器都搞不定呢？

來源

2016-02-29 Paiku Han

顯示您<img />作爲塊級元素：

div > img { 
    display: block; 
}

jsFiddle Demo

來源

2016-02-29 19:46:19 BenM

的問題和解決方案：

原因是因爲內聯元素（如圖像）對準除非由vertical-align屬性修改，否則會自動添加到父框的基線。如果您將塊級元素設置爲inline-block，那麼您也經常會遇到此問題。爲了解決這個問題，你對齊的div的頂部或底部的相關圖片如下：

img { 
    vertical-align: top; 
}

瞭解基線：

基線是很容易想到的文字時，瞭解。字母如abcdefhiklmnorstuvwxz都坐在基線上。然而，在這條線下有空間來處理超過基線的字母。所有其他字母也坐在基線上，但是有一部分字母延伸到基線以下。這些包括字母：gjpqy。由於內聯元素（包括圖像）默認位於基線上，因此除非修改垂直對齊，否則會在其下方留出額外空間。

來源

2016-02-29 19:59:47 kojow7

使用圖像時不可拆除的底部邊距（使用圖像時）

回答

相關問題