CODEWITHSUNDEEP
htmlcss
thechrishaddad
thechrishaddad

Reputation: 6735

navigation padding vertically

i have a navigation bar and i am positioning it absolute, i have a problem with the padding on it, the top and bottom padding are not taking effect on the anchor tag, only the left and right, any idea why this might be occurring?

<nav class="main-nav">
    <ul class="main-nav-links">
        <li class="main-link"><a href="#">HOME</a></li>
        <li class="main-link"><a href="#">ABOUT US</a></li>
        <li class="main-link"><a href="#">ORDER</a></li>
        <li class="main-link"><a href="#">CONTACT</a></li>
    </ul>
</nav>

Here is the css for the nav:

.main-nav {
    position: absolute;
    bottom: 0;
    margin-left: 290px;
}

.main-link {
    list-style: none;
    background-color: #1281f4;
    display: block; 
    float: left;        
}

.main-link > a {
    text-decoration: none;
    color: #073a4f;
    padding: 1em;
}

Upvotes: 1

Views: 77

Answers (2)

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/xdpHJ/

CSS

.main-nav {
    position: absolute;
    bottom: 0;
    margin-left: 290px;
}
.main-link {
    list-style: none;
    background-color: #1281f4;
    display: block;
    float: left;
}
.main-link > a {
    text-decoration: none;
    color: #073a4f;
    padding: 1em;
    display: inline-block;
}

Upvotes: 0

MightyPork
MightyPork

Reputation: 18861

Add display: inline-block; to the <a>.

The way it is, it is rendered as a piece of text, and as such, it can't have vertical padding.

An alternative would be to use line-height;

Here's a demo: fiddle.

Upvotes: 4

Related Questions