Unknown padding/margin issue

Question

I a div with a class of "social-icons" this is a container for my ul list in between my li I'm seeing a padding that I can't seem to get rid of.

Please see screenshot attached. I have tried many things to get rid of this problem, I even set a class to my images and set margin and padding to 0 using css.

Thanks for your help in advance.

.social-icons {
    float: right;
    width: auto;
    height: 24px;
    padding: 0;
    margin: 13px 0 0 80px;
    background-color: black;
}

.social-icons ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.social-icons ul li {
    display: inline;
    margin: 0;
    padding: 0;
}

.social-icon {
    margin: 0;
    padding: 0;
}

<div class="social-icons">
    <ul>
        <li><a href="#"><img src="images/Twitter.png" class="social-icon" alt="Twitter icon" height="24" width="24"></a></li>
        <li><a href="#"><img src="images/Facebook.png" class="social-icon" alt="Facebook icon" height="24" width="24"></a></li>
        <li><a href="#"><img src="images/Google-plus.png" class="social-icon" alt="Google+ icon" height="24" width="24"></a></li>
    </ul>
</div>

if u float them instead of using display inline, it will remove white space between them. Other solutions is below. — Goran Jakovljevic, Nov 20 '15 at 10:39
Thank you, that solved it. Setting the font size to 0 worked as well. — Richard Rodgers, Nov 20 '15 at 10:55
@RichardRodgers Please consider to accept the answer. It might help others with the same question. — Berendschot, Nov 20 '15 at 10:57

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Set font-size: 0px; to the parent div.

Please take a look at this question.

edited May 23 '17 at 12:24

Community

1
1

answered Nov 20 '15 at 10:33

Berendschot

3,026
1
21
43

This is a bad practice (a hack)! (Also the link is broken.) – Szabolcs Páll Dec 17 '15 at 16:34
Link is fixed. But I consider it more like a bug in most browsers than bad practice. – Berendschot Dec 17 '15 at 16:59
It not. The gap is the whitespace between the two element, and logically you cannot tell the difference between two words in two span with different background color with a transarent space between them, or two inline(-block)-ed list items with icons in them. You could just as well write you whole html in one single line, resulting in no whitespace between your tags, or you could make this change to (minify) your html server side, so you can avoid these "problems" in the first place. So no, its not a bug in (all) browsers, instead its simply not understanding how html rendering works! – Szabolcs Páll Dec 18 '15 at 07:11

Szabolcs Páll · Answer 2 · 2015-11-20T11:27:52.723

-1

Leave the closing </li> tag out.

<li>first
<li>second
<li>third

It's valid html (not valid as xhtml) and resolves the issue that is caused by the whitespace (linebreak + tabs) between inline elements, because the browser autoinsert the closing tag right before the next opening.

You also need to change from inline to inline-block, to make the browser handle it correctly.

edited Nov 20 '15 at 11:27

answered Nov 20 '15 at 10:37

Szabolcs Páll

1,402
6
25
31

Your solution did not solve the problem, I left the "" tag out. The white spaces between the icons were still present. – Richard Rodgers Nov 20 '15 at 10:53
You must use `inline-block`! answer edited. – Szabolcs Páll Nov 20 '15 at 11:28

Unknown padding/margin issue

2 Answers2