Question

我在header和div类中尝试了margin-bottom和margin-top的所有内容，但没有任何反应。我想删除标题和下一个元素之间的空格，但要保持它们之间的白色边框。

以下是html和完整css的一部分：

＆＃13;

img {
  width: 200px;
  border-radius: 15%;
  border: 4px solid white;
  margin-top: 20px;
}
body {
  text-align: center;
  background-color: #839F93;
  font-family: helvetica, sans-serif;
}
ul {
  padding: 15px;
  list-style: none;
  background: rgba(255, 255, 255, .5);
}
li {
  display: inline;
  padding: 0 10px 0 10px;
}
a {
  color: black;
}
header {
  background: #385044;
  color: white;
  border-bottom: 2px solid white;
}
h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
iframe {
  border-radius: 30px;
  border: white 2px solid;
}

＆＃13;

<body>
  <header>
    <img src="picture-of-me.jpg" alt="Picture of Ivan">
    <h1>Ivan's site</h1>
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </header>
  <div class="vangelis-chariots">
    <h2>Vangelis - Chariots of fire</h2>
    <iframe width="420" height="315" src="https://www.youtube.com/embed/TYJzcUvS_NU" frameborder="0" allowfullscreen></iframe>
    <p>Click to play video and listen to music</p>
  </div>

＆＃13;

Answer 1

尝试：

header ul {
    margin-bottom: 0;
}

see here

Answer 2

只需将margin:0;添加到标题中的ul即可覆盖应用于ul的默认上/下边距。

ul {
  margin:0;
  padding: 15px;
  list-style: none;
  background: rgba(255,255,255, .5);
}

JSFiddle

Answer 3

从<ul>：

中删除边距

img {
  width: 200px;
  border-radius: 15%;
  border: 4px solid white;
  margin-top: 20px;
}
body {
  text-align: center;
  background-color: #839F93;
  font-family: helvetica, sans-serif;
}
ul {
  padding: 15px;
  list-style: none;
  background: rgba(255, 255, 255, .5);
  margin: 0;
}
li {
  display: inline;
  padding: 0 10px 0 10px;
}
a {
  color: black;
}
header {
  background: #385044;
  color: white;
  border-bottom: 2px solid white;
}
h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}
iframe {
  border-radius: 30px;
  border: white 2px solid;
}

<header>
  <img src="picture-of-me.jpg" alt="Picture of Ivan">
  <h1>Ivan's site</h1>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</header>
<div class="vangelis-chariots">
  <h2>Vangelis - Chariots of fire</h2>
  <iframe width="420" height="315" src="https://www.youtube.com/embed/TYJzcUvS_NU" frameborder="0" allowfullscreen></iframe>
  <p>Click to play video and listen to music</p>
</div>

如何删除body标签中的header和next div元素之间的空格？

3 个答案: