How to remove padding next to adjacent links?_问答_开发者

How to remove padding next to adjacent links?

开发者 https://www.devze.com 2023-01-07 13:30 出处：网络

I cannot remove padding adjacent to a link in this page I have reduced the problem to the bare minimum so its really clear.

相关专题：css padding

I cannot remove padding adjacent to a link in this page

I have reduced the problem to the bare minimum so its really clear.

I could try forcing the width of the div but I want to know why having two elements side by side makes the total wider than the sum of the parts.

You can see my issue here http://www.yart.com.au/stackoverflow/adjacent_a.png

How to remove padding next to adjacent links?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org开发者_StackOverflow/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>

The browsers follow a set of whitespace handling rules set out in the XHTML/HTML schema. E.g.

Line feed characters within a block element must be converted into a space...
A sequence of white space characters must be reduced to a single space character...

To get around it, follow the workarounds presented in the link that meder posted in his answer.

That's just natural behavior for white space between inline elements. Kill the space in the html source, literally to "circumvent" this:

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

You can float the elements, since they are inline: