htmlcssmarginpadding

Unknown padding/margin issue

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.

Padding or margin issue screenshot

.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>

Solution

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

    Please take a look at this question.