Question

我正在设置margin: 0 0 30px 0;，但它不起作用。我仍然可以看到header元素的所有方面存在差距。

这是demo：

header {
  float: left;
  margin: 0px 0px 30px 0px;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Amatic SC', cursive;
  letter-spacing: .1em;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: 900;
  line-height: .8em;
}

h2 {
  font-size: .8em;
  margin: -5px 0 0;
  font-weight: 500;
}

nav {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 0px;
  padding: 0;
}

nav li {
  display: inline-block;
  font-size: 10px;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/************************** COLORS ************************/

body {
  background-color: #343456;
  color: #999;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}

nav {
  background: #599a68;
}

h1,
h2 {
  color: #fff;
}

a {
  color: #6ab47b;
}

nav a,
nav a:visited {
  color: #fff;
}

nav a.selected,
nav a:hover {
  color: #32673f;
}

<body>
  <header>
    <a href="treeHouse.html" id="logo">
      <h1>Hovhannes Mkoyan</h1>
      <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="treeHouse.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

当我设置margin: -10px 0px 30px 0px;时，top间隙消失，但我怎样才能从各方面摆脱它？

Answer 1

要删除标题周围的填充，只需将margin:0添加到通用选择器（*），如下所示：

注意将其放在css文件的最顶部，第1行

* {
    margin:0;
    padding:0;
}

这将删除所有元素的所有填充和所有边距，除非你告诉元素样式给它填充或边距。

<强> Updated Fiddle

希望这有帮助！

Answer 2

网站正文周围有一个默认的8px边距，您可以通过提供body标记或joker *（或两者）CSS样式{{1 }}

margin: 0;

*, body {
  margin: 0;
  padding: 0;
}
header {
  float: left;
  margin: 0px 0px 30px 0px;
  width: 100%;
}
#logo {
  text-align: center;
  margin: 0;
}
h1 {
  font-family: 'Amatic SC', cursive;
  letter-spacing: .1em;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: 900;
  line-height: .8em;
}
h2 {
  font-size: .8em;
  margin: -5px 0 0;
  font-weight: 500;
}
nav {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}
nav ul {
  list-style: none;
  margin: 0 0px;
  padding: 0;
}
nav li {
  display: inline-block;
  font-size: 10px;
}
nav a {
  font-weight: 800;
  padding: 15px 10px;
}
/************************** COLORS ************************/

body {
  background-color: #343456;
  color: #999;
}
header {
  background: #6ab47b;
  border-color: #599a68;
}
nav {
  background: #599a68;
}
h1,
h2 {
  color: #fff;
}
a {
  color: #6ab47b;
}
nav a,
nav a:visited {
  color: #fff;
}
nav a.selected,
nav a:hover {
  color: #32673f;
}

Answer 3

浏览器实际上将默认样式放在某些元素上。这在不同情况下既有用又烦人。它叫master stylesheet

因此，您必须使用margin:8px清除默认的浏览器属性。

以下是一些默认HTML浏览器属性

身体---＆gt; margin-top:5px , margin-bottom:4px

p -------＆gt; margin 20 to 25px

h1，h2，h3 ..... h6 ---＆gt; *{ margin:0; padding:0 }

Evenn ul，li，a，图像，输入，按钮都有一些默认的浏览器样式表。

避免或覆盖这些属性我们必须使用主样式表。我们把它称为重置css，它看起来像这样

el

}

保证金不起作用

3 个答案: