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

Question

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

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;}

标签： htmlcssweb

Answer 1

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

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

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