How to remove padding next to adjacent links?
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
<!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:
.MenuMove
{
...
float: left;
}
加载中,请稍侯......
精彩评论