为什么我的 margin-top CSS 在这种情况下不起作用？

Question

我认为我遇到的问题与 margin 没有在另一个 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>

Answer 1

因为 CSS 中的 class 与 HTML

中的 class 不同

你有这个：

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

但是 CSS

.space25 {
    margin-bottom: 1.563em;
}

备注

A class 永远不能以数字开头
不要使用 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>

Answer 2

A class 名称不应以数字开头，请参阅此处解释原因：

因此，使用 .space25 而不是 .25space，效果很好。

See this fiddle

为什么我的 margin-top CSS 在这种情况下不起作用？

Why will my margin-top CSS not work in this case?

html

css

margin

备注

片段