How to fix margin in nav

Question

I have this code:

nav li{
    display: inline-block;
    background-color:blue;
    width: 70px;
    padding: 5px;

}
nav li:first-child, nav li:last-child {
    border-radius: 5px;
}

<nav>
        <li>Home</li>
        <li>Work</li>
        <li>Contact</li>
</nav>

I would like to remove this right margin. How can I do it? I tried:

margin:0
padding:0

It doesn't work.

you want remove this spacing between nav elements or ? http://prntscr.com/6hwde0 — Ram kumar, Mar 17 '15 at 14:24
Use the comments to connect the divs: http://stackoverflow.com/a/14776780/1654265 — Andrea Ligios, Mar 17 '15 at 17:41

emmanuel · Accepted Answer · 2015-03-17T13:54:15.450

It's a common problem of inline-blocks, you should remove white space between elements.

nav li{
    display: inline-block;
    background-color:blue;
    width: 70px;
    padding: 5px;

}
nav li:first-child, nav li:last-child {
    border-radius: 5px 0 0 5px;
}
nav li:last-child {
    border-radius: 0 5px 5px 0;
}

<nav>
        <li>Home</li><!--
        --><li>Work</li><!--
        --><li>Contact</li>
</nav>

Reference: Fighting the Space Between Inline Block Elements

score 0 · Answer 2 · answered Mar 17 '15 at 14:30

Please reset of parent element font-size: 0 and line-height: 0 then set required font-size and line-height on child element Like this way

nav li{
    display: inline-block;
    background-color:blue;
    width: 70px;
    padding: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;

}
nav li:first-child  {
    border-radius: 5px 0 0 5px;
}
nav li:last-child{border-radius: 0 5px 5px 0;}
nav ul{
    font-size: 0;
    line-height: 0;
}
nav li:hover{
    background: #333;
}

<nav>
       <ul>
            <li>Home</li>
            <li>Work</li>
            <li>Contact</li>
       </ul>
</nav>

How to fix margin in nav

2 Answers2