为什么我的页边空白顶部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中的类与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>

Answer 2

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

因此，使用.space25而不是.25space，它可以很好地工作。

查看此小提琴