Html 为什么链接和容器之间会出现空格？

为什么导航菜单和容器之间会出现这样的间隙，即使我试图消除它。我想不出来

HTML:
  <div class="user-nav">
                                        <a href="#"><i class="flaticon-down-arrow user-info"></i></a>
                                        <div class="nav-content">
                                            <ul>
                                                <li><a href="#">Profile</a></li>
                                                <li><a href="#">Notifications</a></li>
                                                <li><a href="#">Help</a></li>
                                                <li><a href="#">Sign out</a></li>
                                            </ul>
                                        </div>
                                    </div>

CSS:



  .user-nav .nav-content ul li a{font-weight: 500;padding:12px 16px;text-decoration: none;background:orange;display: block;}
    .nav-content{display:none;z-index:1000;position:absolute;background:rgba(150, 203, 255,0.5);box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);right:10px;top:40px;}
    .user-nav:hover .nav-content{display:block;}
    .user-nav{position:relative;height:40px;top:15px;width:30px;}

HTML：






CSS:
.user nav.nav content ul li a{字体大小：500；填充：12px 16px；文本装饰：无；背景：橙色；显示：块；}
.nav内容{显示：无；z索引：1000；位置：绝对；背景：rgba（150203255,0.5）；方框阴影：0px 8px 16px 0px rgba（0,0,0,0.2）；右：10px；顶部：40px；}
.user nav:hover.nav内容{display:block；}
.user nav{位置：相对；高度：40px；顶部：15px；宽度：30px；}

在样式表顶部之后添加顶部

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

---

这些用于删除元素的默认边距和填充。这可能对你有帮助

页边距：0和
填充：0内部
。用户导航ul
将解决您的问题


。用户导航ul{
列表样式：无；
保证金：0；
填充：0；
}
.用户导航.导航内容ul li a{
字体大小：500；填充：12px 16px；
文字装饰：无；
背景：橙色；
显示：块；
}
.导航内容{
显示：块；
z指数：1000；
位置：相对位置；
背景：rgba（150203255,0.5）；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
右：10px；
顶部：40px；
}
.user导航：悬停.nav内容{
显示：块；
}
.用户导航{
位置：相对位置；
高度：40px；
顶部：15px；
宽度：130px；/*在此处增加了一点宽度*/
}







没有，但仍会出现间隙