Banner DIV没有向下移动

Question

我一直试图向下移动我的横幅div（.banner）并且不知道我做错了什么。我尝试过填充底部，填充顶部和边距我不知道是什么阻碍了我能够将其向下移动。我还尝试将导航向下移动以查看是否存在问题，但横幅仍然不会向下移动。

我想要做的事情的图像：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我运行了您的代码段，并将margin-top: 100px添加到成功推送内容的.banner元素中。你试过这个吗？

也许您可以为我们制作实时链接，以便在出现其他干扰的情况下预览问题？

Answer 2

使用margin-top创建DIV之上的距离：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题

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

求解

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有用的链接

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