锚标签产生不必要的高度
我在将不必要的额外高度添加到锚标签时遇到麻烦。
这是基本代码
<!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>
您可以在这里进行测试-http: //jsbin.com/cewuza/2/edit
那我该如何去除多余的高度呢？正如你可以看到我已尝试修改显示内嵌到inline-block的了。
以下内容说明了问题所在：
<a style="display: inline-block; outline: solid blue;">
<span style="display:inline-block; width:25px; height:25px; background-color: red;"></span>
</a>所述span元件坐在文本基线，由于直列块的行为就像一个大的（或也许小）的文本字符。基线下方有一些空间，用于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>