Unknown space between list item

Question

I am designing a simple joomla template. When I came to a very weird problem. Although, I didn't gave any margin or padding, some spaces are appearing between the list items.

Here is a link to the fiddle. Click here

Can someone tell me what am i doing wrong?

Firebug shows nothings.

possible duplicate of [Best way to manage whitespace between inline list items](http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-between-inline-list-items) — Rob W, Nov 27 '11 at 20:03

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

This doesn't have anything to do with the joomla scenario. But this is default way the inline-blocks behave. They add about 4px margin to the right, automatically.

A quick fix of this is applying float:left to the list items

But, a similar question has been asked already and the answerer has provided with the better solution. i.e. closing and starting the li's in a same line

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Furthermore, this might be worth reading as well.

edited May 23 '17 at 12:34

Community

1
1

answered Nov 27 '11 at 10:21

Starx

77,474
47
185
261

Correct way would be to avoid such pattern, if it bothers you. – Starx Nov 27 '11 at 12:40
Adding a
inside
is not a good practice and it won't even support viewport

– Surya R Praveen May 15 '17 at 11:22

score 0 · Answer 2 · answered Nov 27 '11 at 10:25

0

before building a site i suggest to use reset css. it avoide all browser issue and reset all element

this even fix your issue

answered Nov 27 '11 at 10:25

Mikul Gohil

583
1
7
14

check this link http://yuilibrary.com/yui/docs/cssreset/ it will reset all your style. any resolve max your browser issue – Mikul Gohil Nov 27 '11 at 10:35

Unknown space between list item

2 Answers2