我的网页导航栏下面有一个空白区域.我可以让它消失的唯一方法是在下面的标题部分添加边框.我已经多次检查了我的代码,请帮我确定我哪里出错了.我是初学者,所以如果我完全偏离我的结构,请告诉我.
在此代码段中,您只需取消标记标题css即可查看结果.
我真的想知道我在这里做错了什么.谢谢.
body {
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
/******************************
NAV
******************************/
nav {
background-color: #393D44;
margin: 0;
padding: 10px 0;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
font-weight: 300;
padding: 15px 10px;
color: #fff;
}
nav ul li a:hover, .active {
color: #4BAF70;
}
/******************************
HEADER
******************************/
header {
margin: 0;
background-image: url("http://easylivingmom.com/wp-content/uploads/2012/07/grocery-store-lg.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 600px;
/*border: 1px solid green;*/
Grocery Shopping
Grocery Shopping
Get Involved
你
的头内有一个Grocery Shopping
margin
.尝试删除保证金.
即 header .container > h1{ margin-top: 0}
这将解决白色空间
PS:在h1
标记中添加一个类,仅定位此元素
看到这个
body {
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
/******************************
NAV
******************************/
nav {
background-color: #393D44;
margin: 0;
padding: 10px 0;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
font-weight: 300;
padding: 15px 10px;
color: #fff;
}
nav ul li a:hover,
.active {
color: #4BAF70;
}
/******************************
HEADER
******************************/
header {
margin: 0;
background-image: url("http://easylivingmom.com/wp-content/uploads/2012/07/grocery-store-lg.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 600px;
/*border: 1px solid green;*/
Grocery Shopping
Grocery Shopping
Get Involved