إزالة الفراغات بين العناصر المتجاورة CSS

لماذا يوجد مسافه بين العنصرين مع اني قمت بحديد ال margin:0

html code 

    <nav>
        <a class="home" href="#">Home</a>
        <a class="news" href="#">News</a>
        <a class="contact" href="#">Contact</a>
        <a class="about" href="#">About</a>
    </nav>

css code 

body{
    margin: 0 ;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    
}
nav{
    background-color: rgb(59, 59, 59) ;
}

nav .home{
    background-color: rgb(58, 168, 24) ;
}


.home:hover{
    background-color: rgb(59, 59, 59) ;
}


a{
    padding: 10px ;
    margin: 0;
    display: inline-block ;
    width: 100px ;
    /* background-color: rgb(85, 85, 85) ; */
    height: 100% ;
    text-align: center;
    color: white ;
    font-size: 30px ;
    text-decoration: none ;
}


a:hover{
    background-color: rgb(97, 97, 97) ;
}
a:focus{
    background-color: rgb(0, 0, 0) ;
    outline: none ;

}

.about{
    float: right ;
}