为什么我的 margin-top CSS 在这种情况下不起作用？ [关闭]答案

【问题标题】：Why will my margin-top CSS not work in this case? [closed]为什么我的 margin-top CSS 在这种情况下不起作用？ [关闭]
【发布时间】：2016-09-13 18:49:06
【问题描述】：

我相信我遇到的问题与 margins 没有在另一个 div 内的 div 上崩溃有关，但我可能错了。

我希望有人可以将我推向正确的方向。

这是我正在处理的页面中的一小段代码：

.space25 {
  margin-bottom: 1.563em;
}
#menu {
  text-align: center;
  color: white;
  margin-top: .9375em;
  margin-bottom: .9375em;
}

<div id="page-wrap">
  <div id="header">

    <div id="logo">
      <img src="logohuge2.png" width="750px">
    </div>

    <div id="menu">
      <h5><span class="btn">CURRENT WORK</span> <span class="btn-active">PRICING</span> <span class="btn">CONTACT</span></h5>
    </div>

  </div>

  <div id="mediumtitle" class="25space">
    Basic Packages</br>
    </br>
  </div>
</div>

【问题讨论】：

标签： html css margin

【解决方案1】：

因为您在 CSS 中的类与您在 HTML 中的类不同

你有这个：

<div id="mediumtitle" class="25space">

但是你有 CSS

.space25 {
    margin-bottom: 1.563em;
}

注意事项

类不能永远以数字开头
不要使用width html标签，而是使用CSS来设置img的样式
</br> 无效，有效应为<br> 或<br/>，但避免在内容中使用<br />，而应使用margin 或padding 视情况而定

片段

.space25 {
  margin-bottom: 1.563em;
}
#menu {
  text-align: center;
  color: white;
  margin-top: .9375em;
  margin-bottom: .9375em;
}
img {
  width: 750px
}

<div id="page-wrap">
  <div id="header">
    <div id="logo">
      <img src="//placehold.it/750x300" />
    </div>
    <div id="menu">
      <h5><span class="btn">CURRENT WORK</span> <span class="btn-active">PRICING</span> <span class="btn">CONTACT</span></h5>
    </div>
  </div>
  <div id="mediumtitle" class="space25">
    Basic Packages
  </div>
</div>

【讨论】：

你是对的。我确实换了班。我确实改变了它，因为我似乎记得类名不能以数字开头。话虽这么说，当我为菜单 DIV 设置上边距时，它是将边距推向徽标 DIV 还是将边距推向视图顶部？我进行了更改，它似乎正在工作。它似乎实际上是在推动它上面的菜单 DIV。
那是因为你的 h5 有默认的 margin，如果你想要 menu，请使用正确的语义，使用 ul 和 li
啊是的，我想我应该适当地使用一个列表和样式。

【解决方案2】：

类名不应以数字开头，请参阅此处解释原因：https://stackoverflow.com/a/449000/6028607

所以，使用.space25 而不是.25space，它可以正常工作。

See this fiddle

【讨论】：