How to reduce gap between two display:inline items?

Question

gap is showing on all browser?

ul.tabs li {
display:inline;
margin:0 padding:0;}

alt text http://img167.imageshack.us/img167/7283/pruebank5.gif

I can fix the problem using float:left in the LI elements but I need to understand why it's happening.

I don't think your question is very clear. I don't see that there has to be a gap: http://jsbin.com/egavo3 please provide us with some code to reproduce your problem — David Hedlund, Apr 29 '10 at 08:20
Alternatively, analyze the elements with Firebug's "Layout" tool, it should show you what is responsible for the gap. Are you sure it's not just white spaces? — Pekka, Apr 29 '10 at 08:25

score 5 · Accepted Answer · answered Apr 29 '10 at 08:33

5

You have whitespace between your inline elements. float: left fixes the problem, because floating implicitely converts the element to a block element, regardless of display: inline.

And you need a ; between margin:0 and padding: 0.

answered Apr 29 '10 at 08:33

Residuum

11,878
7
40
70

score 3 · Answer 2 · edited May 23 '17 at 12:09

3

... but I need to understand why it's happening.

You may have whitespace or new lines between your inline elements.

For further reading, you may want to check out the following Stack Overflow post:

Best way to manage whitespace between inline list items

edited May 23 '17 at 12:09

Community

1
1

answered Apr 29 '10 at 08:29

Daniel Vassallo

337,827
72
505
443

score 0 · Answer 3 · answered Apr 29 '10 at 08:29

0

Reduce the word-spacing CSS property to less than 1em.

answered Apr 29 '10 at 08:29

How to reduce gap between two display:inline items?

3 Answers3