錨標記會產生不需要的高度

我遇到了不必要的額外高度添加到錨標記的問題。錨標記會產生不需要的高度

這是基本的代碼

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
<a style="display: inline-block; padding:0; margin:0;"> 
    <span style="display:inline-block; width:25px; height:25px; background-color: red; padding:0; margin:0;"></span> 
    </a> 
</body> 
</html>

，你可以測試在這裏 - SO http://jsbin.com/cewuza/2/edit

如何刪除不想要的高度？正如你所看到的，我已經嘗試修改顯示從在線到行內塊已經。

enter image description here

來源

2015-01-17 digitalzoomstudio

字體大小：0;修復了這個問題，但這是否是最佳做法？ – digitalzoomstudio

什麼額外的高度？你的jsbin顯示一個25×25像素的紅色框。那麼問題是什麼？你的屏幕截圖有些不同。請張貼實際重現問題的代碼，並明確指出問題所在。 –

檢查錨標籤..不是跨度本身它顯示29px – digitalzoomstudio

下面演示了什麼問題居然是：

<a style="display: inline-block; outline: solid blue;"> 
 
    <span style="display:inline-block; width:25px; height:25px; background-color: red;"></span> 
 
</a>

的span元素坐在文本基線，因爲內嵌塊的行爲像一個大（或者sm全部）文本字符。基線下方有一些空間，用於像j，g和q這樣的字母下行。

爲了解決這個問題，使對準到它的父元素的底部的內聯塊，使用vertical-align屬性：

<a style="display: inline-block; outline: solid blue;"> 
 
    <span style="vertical-align: bottom; display:inline-block; width:25px; height:25px; background-color: red;"></span> 
 
</a>

來源

2015-01-17 13:17:43

錨標記會產生不需要的高度

回答

相關問題