left padding on anchor tag

Question

i have a jsfiddle below with an example of my links displayed in a in-line block, what i don't understand is why is there some sort of padding or margin at the start of every anchor tag, maybe someone could help me out, i am not sure if i have missed something but i just cant seem to find out why that padding is there?

This is the html code:

 <div class="wrapper">
   <header class="main-header">
            <h1>blah blah blah</h1>
            <nav class="main-nav">
                <ul class="main-nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Get a Quote</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

This is all the css code:

.wrapper {
    width: 100%;
    min-width: 960px;
}

.main-header {
    position: relative;
    width: 100%;    
    height: 60px;
    background-color: #41a2cd;
}

.main-header > h1{
    float: left;
    margin: 11px 0 0 5px;
    color: #073a4f;
}

.main-nav-links > li {
    list-style: none;
    display: inline-block;
}

.main-nav-links li > a {
    text-decoration: none;
    display: block;
    color: #073a4f;
}

.main-nav-links > li {
    border-right: 1px solid #45b1e1;
}

.main-nav-links li > a:hover {
    background-color: #ffffff;
    /*background-color: #50bae8;*/
}

http://jsfiddle.net/pDvZt/

An easy to understand, remove those styles and find out the difference. — Praveen, Aug 08 '13 at 04:54

Mr. Alien · Accepted Answer · 2013-08-08T05:10:48.130

6

When you use display: inline-block; it will leave 4px spacing between the elements, so you need to use margin-left: -4px; or consider using float instead.

Demo (Using margin-left: -4px;)

.main-nav-links > li {
    list-style: none;
    display: inline-block;
    margin-left: -4px;
}

Demo 2 (Using float property)

.main-nav-links > li {
   list-style: none;
   float: left;
}

Note: Don't forget to clear your floating elements if you use float: left; for li property.

Edit: I would like to specify that inorder to prevent this behavior you can also modify your markup(if you've access to it) than you can line up your li elements so that white space between the elements won't be there anymore, for example

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

edited Aug 08 '13 at 05:10

answered Aug 08 '13 at 04:57

Mr. Alien

153,751
34
298
278

when you say clear your floating elements what do you exactly mean? and how would i do it because now it all works but when i zoom in and out on my window my containers shift and i think it is because i have not cleared them. – thechrishaddad Aug 08 '13 at 06:08
@user1265535 containers always shrink when you zoom in or out, if you want to know about clearing, just search on google "float clear" and you will get tons of articles else you can refer my answer [here](http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734) – Mr. Alien Aug 08 '13 at 06:10

score 1 · Answer 2 · answered Aug 08 '13 at 05:04

1

One solution is to put

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

in one line. This is actually because the new lines are formatted as spaces.

answered Aug 08 '13 at 05:04

Sara

274
4
13

+1 Yea I forgot to add this :p but this will mess up his source file if he will get a loooooong single string – Mr. Alien Aug 08 '13 at 05:05
Actually, it's white space in general that adds the 4 pixels offset, not just new lines. – James Bruckner Aug 08 '13 at 05:07

score 0 · Answer 3 · answered Aug 08 '13 at 06:24

0

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

Its the best solution you can get

answered Aug 08 '13 at 06:24

Vikas Ghodke

6,602
5
27
38

left padding on anchor tag

3 Answers3