How to remove the gap between inline-block elements
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
</div>
only in win ie6, the gap between a
is still coming out, the style letter-spacing:-0.3em
will be effective if the style is removeda { letter-spacing:0 }
why? can i understand this problem?
source to share
Wow, it stuck me out a bit ... believe it or not, here's your answer:
font size: 0; must be added to the parent element
In the case of your example, I would define the font size of the tags separately and add "font-size: 0;" to the parent div
In other words:
CSS
.item-list {letter-spacing: -0.3em; font size: 0;}
.item-list a {letter-spacing: 0; display: inline-block; font-size: SOMETHING HIGHER;}
(also your DOCTYPE declaration should be correct or show that inline-block may have problems working in IE, at least I had problems with it in IE7)
This should stop any unnecessary frustration you experience on the display: inline-block;
source to share
It has to do with how you print your HTML. Since you format it well in your IDE, a la, with spaces and newlines, those spaces and newlines show up when displayed on the page. Therefore, instead of
<div class="item-list">
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>
</div>
enter it as one line and they disappear:
<div class="item-list"><a href="#">a</a><a href="#">a</a><a href="#">a</a><a href="#">a</a></div>
source to share