Question

这个CSS问题让我吃了一惊： - （

我无法删除此页面http://www.yart.com.au/stackoverflow/test2.htm

中链接下的填充

我已将问题减少到最低限度，因此非常清楚。

您可以在http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png

查看我的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style type="text/css">

*
{
  padding:0;
  margin:0;
  font:15px arial;
}

div
{
  display:inline;
  height:18px;
  line-height:18px;
  background-color :blue;
}

.PageMove
{
  display:inline-block;
  background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
  background-repeat:no-repeat;
  width:18px;
  height:18px;
  line-height:18px;
}


.Text
{
 background-color :red;
 display:inline;
 height:18px;
 line-height:18px;
}


</style>
</head>


<body>

<div><a href="#" class="PageMove"></a><a href="#" class="Text">18 pixels high</a></div>

</body>

</html>

Answer 1

display: inline-block的内容被视为字符并位于基线上。下方有空间（你可以在p，j，g和q等字母上找到）。

设置vertical-align: bottom以将元素放在底部而不是基线上。

Answer 2

为什么不使用float？

<div style="width: give-it-a-usefull-width">
    <a href="..." id="pageMove" style="float: left;">...</a>
    <a href="..." id="text" style="flaot: left;">...</a>
</div>

Answer 3

我不知道你的问题究竟来自哪里，但是

内联元素不能指定为'height'。因此，“内联”height:18px;的{{1}}将被忽略。

Answer 4

我在一些电子邮件模板上遇到了这个问题。 IE和FF没有显示蓝线，但是在iphone和android等移动设备上打开的电子邮件确实如此。

通过Chrome浏览器在网络电子邮件客户端中打开的电子邮件也显示为蓝线。

我通过将图像放在单元格的中间来解决问题。 align =“middle”

将单元格设置为align =“middle”。

（这会将蓝线放在图像后面并解决问题）

在不规则形状的图像（即png或gif）上，您可能需要考虑使用背景颜色保存图像或转换为白色背景上的jpeg。再一次，它不是解决这个问题的图像类型，只需删除一个清晰的背景并创建一个方形颜色块的实心矩形来隐藏线条就可以解决这个问题。

祝你好运！

Nate Boe

css - 在文本链接旁边的背景图片链接下填充 - 为什么？

4 个答案: