为什么我的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中的类与HTML中的类不同

你有这个:

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

但是你有CSS

.space25 {
    margin-bottom: 1.563em;
}

笔记

• 一个班不能从一个数字开始
• 不要使用widthhtml标签,而是使用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>