Home/ Questions/Q 919659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T18:34:58+00:00

I cannot remove padding adjacent to a link in this page I have reduced

  • 0

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 alt text

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0