标语DIV没有向下移动

Question

我一直在尝试将横幅div（.banner）移下，却不知道我在做什么错。 我已经尝试过padding-bottom，padding-top和margins，但我不确定是什么阻碍了我将其向下移动。 我也尝试过将导航栏向下移动，以查看是否是问题所在，但横幅仍不会向下移动。

我正在尝试做的图像：

 body { background-color: #ffffff; padding: 0; margin: 0; } .nav { background-color: #gray; color: black; list-style: none; text-align: right; } .nav > li { display: inline-block; padding-right: 0px; font-size: 20px; margin-right: 20px; } .nav > li > a { text-decoration: none; color: black; } .nav > li > a:hover { opacity: .5; } .banner { background-color: gray; width: 100%; height: 400px; padding-bottom: 15px; } 

 <div class="banner"> <ul class="nav"> <li><a href="##">Gallery</a></li> <li><a href="###">About</a></li> </ul> </div> 

Answer 1

我运行了您的代码段，并向.banner元素添加了margin-top: 100px ，这成功地将内容压低了。 你有尝试过吗？

也许您可以为我们提供一个实时链接，以便在有其他干扰的情况下预览问题？

Answer 2

使用margin-top在DIV margin-top创建距离：

 body { background-color: #ffffff; padding: 0; margin: 0; } .nav { background-color: #gray; color: black; list-style: none; text-align: right; } .nav > li { display: inline-block; padding-right: 0px; font-size: 20px; margin-right: 20px; } .nav > li > a { text-decoration: none; color: black; } .nav > li > a:hover { opacity: .5; } .banner { background-color: gray; width: 100%; height: 400px; padding-bottom: 15px; margin-top: 50px; } 

 <div class="banner"> <ul class="nav"> <li><a href="##">Gallery</a></li> <li><a href="###">About</a></li> </ul> </div> 

Answer 3

问题

您确定您确实使用了margin-top属性吗？

解决

只需将.banner padding替换为margin-top属性。

 body { background-color: #ffffff; padding: 0; margin: 0; } .nav { background-color: gray; color: black; list-style: none; text-align: right; } .nav > li { display: inline-block; padding-right: 0px; font-size: 20px; margin-right: 20px; } .nav > li > a { text-decoration: none; color: black; } .nav > li > a:hover { opacity: .5; } .banner { background-color: red; width: 100%; height: 400px; margin-top: 150px; } 

 <div class="banner"> <ul class="nav"> <li><a href="##">Gallery</a></li> <li><a href="###">About</a></li> </ul> </div> 

有用的链接

• Shay Howe讲授了盒子模型（宽度，填充，边距等）。