CODEWITHSUNDEEP
htmlcsscss-float
thechrishaddad
thechrishaddad

Reputation: 6735

left padding on anchor tag

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/

Upvotes: 5

Views: 4447

Answers (3)

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

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

Its the best solution you can get

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157314

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>

Upvotes: 6

Sara
Sara

Reputation: 272

One solution is to put 

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

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

Upvotes: 1

Related Questions