Question

为什么标题顶部和身体上方有空间？ overview

h1 breakdown

header breakdown

body {
  background-color: #efefef;
  font-family: "verdana";
  max-width: 1000px;
  border: solid #ffffff 3px;
  margin: auto;
}

#container {
  background-color: #8a8a8a;
}

#header {
  background-color: #8a8a8a;
}

h1 {
  background-color: #F47D31;
  color: #FFFFFF;
  text-align: center;
  font-family: "verdana";
  text-transform: uppercase;
  padding: 10px 0 10px 0;
}

h2 {
  background-color: #F47D31;
  color: #ffffff;
  font-family: "verdana";
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0 10px 0;
}

h3 {
  background-color: #F47D31;
  color: #ffffff;
  font-family: "verdana";
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0 10px 0;
}

p {
  font-family: "verdana";
  line-height: 1.5em;
  color: #ffffff;
  text-align: justify;
}

#nav {
  display: block;
  width: 25%;
  float: left;
}

#nav ul {
  list-style-type: none;
}

#nav a:link, #nav a:visited {
  display: block;
  border-bottom: 2px solid #fff;
  padding: 10px;
  text-decoration: none;
  font-weight: bold;
  margin: 5px;
}

#nav a:hover {
  color: white;
  background-color: #F47D31;
  text-decoration: underline;
}

hr {
  border: solid #efefef 1px;
}

table {
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #E9EAE8;
  color: #2a2a2a;
}

tr:nth-child(odd) {
  background-color: #ffffff;
  color: #2a2a2a;
}

tr:hover {
  background-color: #F47D31;
}

#products_list {
  list-style: none;
  padding: 20px
}

figure {
  display: block;
  width: 202px;
  height: 170px;
  float: left;
  margin: 10px;
  background-color: #e7e3d8;
  padding: 9px;
}

figure img {
  width: 200px;
  height: 150px;
  border: 1px solid #d6d6d6;
}

figcaption {
  text-align: center;
  color: #F47D31;
}

fieldset {
  background-color: #f1f1f1;
  border: none;
  border-radius: 2px;
  margin-bottom: 0px;
  overflow: hidden;
  padding: 0 10px;
}

ul {
  background-color: #fff;
  border: 1px solid #eaeaea;
  list-style: none;
  margin: 12px;
  padding: 12px;
}

li {
  margin: 0.5em 0;
}

label {
  display: inline-block;
  padding: 3px 6px;
  text-align: right;
  width: 150px;
  vertical-align: top;
}

.paragraph {
  padding: 0 10px 0 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Innovative Multimedia Seminar 1</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="header">
    <h1>Hello World</h1>
    <h2>Hello World 2</h2>
    <h3>Innovative Multimedia Rocks!</h3>
  </div>

  <div id="container">

    <div id="nav">
      <!--Add Links Here -->
      <ul>
        <li><a href="index.html"> Home Page </a></li>
        <li><a href="products.html"> Products Page </a></li>
        <li><a href="register.html"> Register Page </a></li>
        <li><a href="https://www.shu.ac.uk/‎"> SHU website homepage </a></li>
      </ul>
    </div>

    <div>

      <figure>
        <img src="img/image1.jpg" alt="Horses in a field">
        <figcaption>
          A horse and two foals
        </figcaption>
      </figure>

      <figure>
        <img src="img/image2.jpg" alt="Flowers growing">
        <figcaption>
          Three Flowers Growing
        </figcaption>
      </figure>

      <figure>
        <img src="img/image3.jpg" alt="Butterfly on flower">
        <figcaption>
          Butterfly on flower
        </figcaption>
      </figure>

      <div class="paragraph">
        <p>
          Lorem ipsum dolor sit amet, oporteat hendrerit id pro. His munere virtute facilis ex. Detracto concludaturque vel ea, quo id iusto deseruisse accommodare. Ea sit habeo audiam concludaturque, an usu vero numquam eruditi. Ex scripta neglegentur pri, timeam
          omittam theophrastus ne mel, mea simul perpetua no.
        </p>

        <hr>

        <p>
          Vel aliquid fierent te, per quas elaboraret in. Eu mei omittam prodesset, vel liber complectitur concludaturque an. Nihil choro at qui, rebum legendos mei ex, vis ex choro quaeque reprimique. No pri bonorum expetenda liberavisse, sed ut erat senserit.
        </p>

        <hr>

        <p>
          No duo habemus vivendum euripidis. Et mutat populo constituto per, veniam populo honestatis sit ex. Propriae lucilius at ius, qui tale invidunt te. In vitae probatus explicari nec, ex prima delenit moderatius sit, putent mentitum gloriatur pro in. Justo
          volumus eum an.
        </p>
      </div>

    </div>
  </div>
</body>

</html>

Answer 1

只需将margin-top设置为0，即可从h1中删除空白；

h1 {
  background-color: #F47D31;
  color: #FFFFFF;
  text-align: center;
  font-family: "verdana";
  text-transform: uppercase;
  padding: 10px 0 10px 0;
  margin-top: 0;
}

Code Pen Example

我不确定您的身体有填充物是什么意思。

Answer 2

如您在 h1细分图片中所见，h1标签从styles.css获得样式，并且填充设置为h1标签上方和下方的10个像素。

因此，您可以尝试从styles.css中删除padding-style，并查看其是否删除了空格。还是更简单，只需取消选中图片所示的DevTools中的填充样式复选框即可。

为什么标题和正文之间存在填充？

2 个答案: