你好，我想问我不明白为什么导航栏和内容框的边缘空间是黑色的我仔细检查了尝试使用 chrome 进行一些调试但仍然发现了导致此错误的原因..代码如下:
/*css code*/
#header{
height: 85px;
padding: 0px 50px 0px 50px;
margin-left: 200px;
margin-right: 200px;
border-radius: 20px;
background-color: cyan;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
body{
background-image: url(gods_of_egypt_elodie_yung-3840x2160.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
#heading{
color: aliceblue;
font-size: 70px;
text-align: center;
margin: 0px;
}
#navbar{
background-color: grey;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden
}
ul{
padding: 0px;
margin: 0px;
font-family: arial;
}
li{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
/*
#searchbar{
margin-left: 250px;
margin-top: 4px;
margin-bottom: 0px;
}*/
#content{
background-color: white;
height: 400px;
margin: 0px 200px 0px 200px;
} <html>
<link rel="stylesheet" href="stylesheet.css">
<body>
<div id="header">
<h1 id="heading">#Some Stuff</h1>
</div>
<div id="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">More</a></li>
<li><a href="#">About US</a></li>
</ul>
</div>
<div id="content">
<p>WOW!
</p>
</content>
</body>
</html>
请帮助解决这个问题因为我完全不知道为什么我卡在这里
最佳答案
快速:
#content p
{
margin:0px;
}
解释
默认情况下，某些浏览器会自动为标签设置边距。
例如 body
margin: 8px;
在
标签上。在您的代码中，您可以简单地添加:body {
background-image: url(gods_of_egypt_elodie_yung-3840x2160.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
margin: 0px; //THIS LINE HERE!
}
标签也一样
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
所以，你也可以强制
margin:0px;
关于css - 黑白导航栏和内容栏，经过一些调试后找不到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52261184/