how to remove the gap between the inline-block elements

Question

.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 exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }

why? can i figure out this problem?

pepperdreamteam · Answer 1 · 2012-04-06T04:08:39.297

13

wow this one stumped me for a while...believe it or not here is your answer:

font-size:0; must be added to parent element

In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element

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 must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)

This should end any extra margin frustration you're experiencing from display:inline-block;

edited Apr 06 '12 at 04:08

answered Apr 06 '12 at 03:46

pepperdreamteam

2,772
3
17
15

tks,bu i had tried this,it still have gap in win ie6,even if the gap is smaller.i use word-spacing:-0.5em (or some else value,it has relation to font),it works,you can have a test. – timezhong Apr 06 '12 at 05:05

score 3 · Answer 2 · answered Jan 31 '13 at 15:02

It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of

<div class="item-list">

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

</div>

type it out as one line and they will go away:

<div class="item-list"><a href="#">a</a><a href="#">a</a><a href="#">a</a><a href="#">a</a></div>

score 1 · Answer 3 · answered Oct 17 '13 at 07:18

1

You can add this CSS

a{float:left}

Gap will Remove

answered Oct 17 '13 at 07:18

Dinesh Kanivu

2,551
1
23
55

1

I have the same issue, the `float:left` break center align – Mo. Oct 21 '15 at 10:34

score 0 · Answer 4 · answered Apr 06 '12 at 04:02

0

I always use:

    line-height: 2.2; //or whatever value you want

I took from facebook layout and works amazing for me

answered Apr 06 '12 at 04:02

RollRoll

8,133
20
76
135

it looks like ,you misunderstanding my meaning. – timezhong Apr 06 '12 at 05:06

how to remove the gap between the inline-block elements

4 Answers4