Line break displayed in ul li

Question

Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML

I have an <ul> with multiple <li> children.

The li's just contain an image, and I removed all the margin from them. I also called display:inline-block; on them, so they are now displayed in one line.

However, there is still a small margin on the right side of the lis. I found out that it's the line break, and that, if I remove it the margin disappear. However, it's very unreadable if I have to remove all the line breaks.

Can you give me a solution for this one?

HTML

<ul>

    <li><a href="#"><img src="image1.png" alt="post_heart" /></a></li>
    <li><a href="#"><img src="image2.png" alt="post_repeat" /></a></li>
    <li><a href="#"><img src="image3.png" alt="post_tag" /></a></li>
    <li><a href="#"><img src="image4.png" alt="post_share" /></a></li>

</ul>

LESS

ul {
    display:inline;
    padding:none;
    margin:none;

    li {
        display:inline-block;

        padding:none;
        margin:none;

        a {
            display:block;  
            margin:none;
            border-right: 1px solid #e0e1e2;

            &:hover {
                .linearGradient(transparent, rgba(0,0,0,0.05));
            }
        }

        &:last-child {
            a {
                border:none;
            }
        }
    }
}

It will be much easier to help if you create a JSFiddle for this. — Ennui, Jan 23 '13 at 18:33
here are your choices - http://stackoverflow.com/a/12183374/1499781 — Zoltan Toth, Jan 23 '13 at 18:35
I don't know why someone down voted the question, I've ran into this issue before. — Christopher Marshall, Jan 23 '13 at 18:41
@cimmanon Sorry I wasn't aware that it's because of the `inline-block`, therefore I didn't find the right solution via search. — IluTov, Jan 23 '13 at 18:47

score 4 · Accepted Answer · answered Jan 23 '13 at 18:35

4

The "margin" is actually whitespace (some combination of tabs, spaces, or newlines). You can keep your formatting by commenting it out.

<ul><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
--></ul>

See also: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

answered Jan 23 '13 at 18:35

cimmanon

67,211
17
165
171

Seems odd, I have never seen this. Is there no other way to prevent this? – IluTov Jan 23 '13 at 18:36
You can float the elements instead of displaying inline-block. – Christopher Marshall Jan 23 '13 at 18:40
@ChristopherMarshall yes, you can use floats to get roughly the same effect. However, if you're interested in centering the list instead of having it appear to either the right or left of the page, floats make it tougher to do so. – cimmanon Jan 23 '13 at 18:45
@cimmanon It's ok, the list should be aligned left anyway – IluTov Jan 23 '13 at 18:48
@cimmanon Floating the LI's, not the list itself. But I agree it does add other things to consider using floats. – Christopher Marshall Jan 23 '13 at 18:50
sorry, yes, that's what I meant. The list is aligned left, so it won't cause any troubles if the li's are left aligned too. – IluTov Jan 23 '13 at 18:56
convenient alternative: using `` as a gap filler – phil294 Feb 19 '16 at 16:06

score 2 · Answer 2 · answered Jan 23 '13 at 18:34

2

Make sure you have no margin on the li's.

I've also ran into the this issue using inline-block, that in your markup, you can't have any white space between li elements or it will render it. Looks ugly, but worked.

E.g This

<ul>
<li></li><li></li><li></li><li></li><li></li><li></li>
</u>

instead of this

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

answered Jan 23 '13 at 18:34

Christopher Marshall

10,678
10
55
94

Why the downvote? It's essential the same answer as cimmanon? – Christopher Marshall Jan 23 '13 at 18:36
Thanks for the answer! I wrote in the question that I'd like to avoid this. cimmanon's answer helped me. – IluTov Jan 23 '13 at 18:44
Ahh, np. Glad you have it worked out. – Christopher Marshall Jan 23 '13 at 18:51

score 0 · Answer 3 · answered Jan 23 '13 at 18:34

0

Just make them float:left. When they are display:inline there is always a space about 3px I think.

answered Jan 23 '13 at 18:34

Панайот Толев

6,597
5
19
28

This would be the best alternative. – Christopher Marshall Jan 23 '13 at 18:38
I have tried everything to remove the space on display:inline elements but only this seems to be a solution – Панайот Толев Jan 23 '13 at 18:39
Thanks for the answer, however this doesn't seem to be the problem. – IluTov Jan 23 '13 at 18:41

Line break displayed in ul li

HTML

LESS

3 Answers3