【发布时间】：2020-12-23 02:57:20
【问题描述】：
我正在尝试创建一个黑色背景的导航栏（由两个水平列表组成）。问题是，即使我将 ul 元素的宽度和高度设置为 100% 并将边距和填充设置为 0px，背景颜色也不会到达页面的外边框。
我还尝试将正文和 HTML 的边距和填充设置为 0px，但这也失败了。通过将 HTML 背景颜色设置为黑色，我能够获得接近于我所寻找的结果，但这也给网页提供了黑色边框。如果你能帮助我，谢谢。我的代码如下。
body {
font-family: helvetica;
background-color: gray;
}
#nav {
display: flex;
}
img{
width: 100px;
height: 100px;
}
#left{
color: black;
font-size: 24px;
}
#left li{
padding: 10px;
padding-top: 14px;
padding-bottom: 6px;
float: left;
display: block;
}
#left_list{
width: 70%;
clear: right;
}
#right{
color: black;
font-size: 24px;
}
#right li{
padding: 22px;
padding-bottom: 26px;
padding-top: 16px;
float: right;
display: block;
}
#right_list{
width: 30%;
float: right;
clear: left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: black;
width: 100%;
height: 100%;
}
#nav a:link{
color: white;
display: block;
margin-top: 25px;
}
#nav a:hover{
color: hotpink;<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="nav">
<div id="left_list">
<div id="left">
<ul>
<li><img src=""></li>
<li><a style="color: green" href="/index.html">Home</a></li>
<li><a style="color:white" href="/contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="right_list">
<div id="right">
<ul>
<li><a style="color:white" href="" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a style="color:white" href="" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a style="color:white" href="" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
</ul>
</div>
</div>
</div>【问题讨论】：
-
使用检查器，我可以看到
<body>有 8px 的边距，它将从根 html 元素插入。在 body 的 CSS 中设置margin: 0;可以消除它。
标签： html css background-color