Top-Margin Value 什么都没做？答案

【问题标题】：Top-Margin Value not doing anything?Top-Margin Value 什么都没做？
【发布时间】：2017-07-29 10:30:09
【问题描述】：

我知道以前有人问过这个问题。我只是在练习网页设计，并假装为武术学校创建网站（纳什维尔自卫不是真正的业务）。

我遇到了问题，#Slogan 的上边距值似乎不起作用。事实上，让上边距和下边距发挥作用一直是我一直遇到的一个挥之不去的问题。

结果：

谁能解决这个问题？

#Title {
  border-width: 1px;
  border-style: solid;
  border-color: greenyellow;
  width: 50%;
  float: left;
  margin-left: 45px;
  margin-top: 10px;
  margin-bottom: 0;
  height: 42px;
}

#Title h1 {
  font-family: Stencil, sans-serif;
  font-size: 42px;
  margin-top: 2px;
  margin-left: 9px;
}

#Slogan {
  border-width: 1px;
  border-style: solid;
  border-color: green;
  width: 50%;
  height: 50px;
  float: left;
  margin-left: 14%;
  margin-top: none;
  display: inline-block;
}

<div id="Container">
  <div id="TopofPage">
    <div id="Title">
      <h1>Nashville Self-DEfense</h1>
      <div id="Slogan"></div>
    </div>
    <div id="SocialMedia"></div>
    <!--not shown in image-->
  </div>
<div id="TopMenu">
    <ul>
      <li><a href="#home">HOME</a></li>
      <li><a href="#news">CLASSES</a></li>
      <li><a href="#contact">STORE</a></li>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#about">CONTACT</a></li>
    </ul>
</div>

【问题讨论】：

none 不是有效的保证金值。 margin-top: 0 会更合适。或者这不是你所指的问题？
不清楚你在期待什么。 margin-top 和 margin-bottom 不起作用，因为您没有为其分配任何值。
间隙不是#Slogan的上边距，而是h1元素的下边距。
@fubar 还是不行，#Slogan 不会让步。
@TheGuy445 我已经发布了答案。

标签： html css margins

【解决方案1】：

用margin-top: 0px !important代替margin-top:none;

【讨论】：

这里为什么需要!important？
覆盖任何以前的样式。
我知道它的作用，但是为什么在没有竞争 CSS 规则的情况下建议使用它？

【解决方案2】：

必须是 margin-top: 0; 不是 margin-top: none;

只要前一个元素(#title h1) 设置了边距，它就会在 '0' 上更高。

【讨论】：

top-margin 不是有效的 CSS 属性。
是的。边距顶部什么的。
@Dimek 我什至尝试添加一个底部边距，但它仍然不会让步。