html - 尝试移动 div 时在顶部添加白边距

Question

最近几天我一直在做一个网站，今天我想把导航栏从页面顶部向下移动时遇到了一个问题。这对我来说从来都不是问题，但到目前为止我已经阅读了我的代码很多次，以至于我找不到错误。

我所做的是添加一个 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

如果有人知道该怎么做，我很乐意听取您的意见。谢谢:)

Answer 1

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