CODEWITHSUNDEEP
htmlcss
Holly
Holly

Reputation: 1976

How can I get rid of space in this <li> item? Its not padding or margin from what i can tell

I have some <li> items as part of my navigation bar on the website i'm making, I'm completely stumped on some spacing that occurs just before the items.

margin and padding are both 0, and list-style-type is set to none. Any ideas?

I forgot the website link! Here. enter image description here

Additional details as requested:

Related CSS:

/*****************

NAVIGATION STYLING

*****************/
#navigation{
    position: absolute;
    top: 0;
    z-index:10;
    text-align: center;
    width: 100%;
    margin: 0 auto 0 auto;
}
    #navigation a:link, a:visited{
        text-decoration: none;
        color: white;
        font-size:4.16em;
        margin: 0.5em;
        line-height: 1.5em;
        text-transform: uppercase;
        float: left;
        width:100%;
    }
    #navigation #me{

    }
    #navigation a.im:link, a.im:visited{
    line-height: 0em;
    }
    #navigation a.holly:link, a.holly:visited{
    line-height: 0em;
    }
    #navigation a.games_programmer:link, a.games_programmer:visited{
    line-height: 0em;
    }
    #navigation ul{
        height: 50px;
        text-decoration: none;
        background:#1d6482;
        margin: 0;
        padding: 0;
    }
    #navigation li{
        display: inline-block;
        list-style-type: none;
    }

Upvotes: 0

Views: 74

Answers (1)

Joel Etherton
Joel Etherton

Reputation: 37533

You have in the navigation that any link should have margin: 0.5em. That looks to be about the size of the space. It appears by your screenshot that you have it open in Chrome. You should be able to see all styles applied to that element and use the checkboxes on each to remove or even alter the applied styles to find the culprit.

Upvotes: 3

Related Questions