最近几天我一直在做一个网站,今天我想把导航栏从页面顶部向下移动时遇到了一个问题。这对我来说从来都不是问题,但到目前为止我已经阅读了我的代码很多次,以至于我找不到错误。
我所做的是添加一个 margin-top: 50px; 到我的导航 div,但它随后继续在父 div 上方创建一个白色边框。
CSS
#section1 {
background-image: url("images/section1bg.jpg");
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
#topnav {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
HTML
<div id="section1">
<div id="topnav">
<a href="#" class="topnav">Languages</a>
<a href="/contact/" class="topnav">Contact</a>
</div>
... other content
</div>
下图应该显示了问题。 http://i.stack.imgur.com/8e1mW.png
如果有人知道该怎么做,我很乐意听取您的意见。 谢谢:)
最佳答案
将 margin-top: 50px;
更改为 padding-top: 50px;
#topnav {
padding-top: 50px;
margin-left: auto;
margin-right: auto;
text-align: right;
width: 400px;
padding-bottom: 10px;
border-bottom: 1px solid white;
position: relative;
}
关于html - 尝试移动 div 时在顶部添加白边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31806974/