Question

我无法移除this page

中链接旁边的填充

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

我可以尝试强制div的宽度，但我想知道为什么并排使用两个元素会使总数大于部分之和。

您可以在http://www.yart.com.au/stackoverflow/adjacent_a.png alt text http://www.yart.com.au/stackoverflow/adjacent_a.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;
 background-color:Red;
 height:18px;
}


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



</style>
</head>


<body>


<div>

      <a href="#" class="MenuItemMove"></a>
      <a href="#" class="MenuItemMove"></a>

</div>


</body>

</html>

Answer 1

这只是内联元素之间的空白行为的自然行为。杀死html源代码中的空格，字面意思是“规避”这个：

http://work.arounds.org/unwanted-white-space-between-inline-block-elements/

Answer 2

浏览器遵循XHTML/HTML schema中列出的一组空白处理规则。 E.g。

必须将块元素中的换行符转换为空格...
必须将一系列空格字符缩减为单个空格字符...

要解决此问题，请按照meder在其答案中发布的链接中提供的解决方法进行操作。

Answer 3

您可以浮动元素，因为它们是内联的：

.MenuMove
{
    ...
    float: left;
}

css - 如何删除相邻链接旁边的填充？

3 个答案: