This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]

(8个答案)



Why does this CSS margin-top style not work?

(13个回答)


2年前关闭。




我在网站上方有一个空白,我想删除但不知道如何:

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>DevDoWeb.com</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="styleSheet.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <h3 class="headerText">Test</h3>
    </div>
  </body>
</html>


开发工具告诉我,它不能破坏,填充或边界....我真的不知道该怎么做,任何帮助都值得赞赏。

最佳答案

在这种情况下,空格是由浏览器样式表添加到h3的空白引起的。如果通过将h3的边距设置为0来消除该空白,那么您将摆脱空白。

body {
  border: 0;
  padding: 0;
  margin: 0;
}

.header {
  width: 900px;
  height: 100px;
  background-color: #5132FF;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  border: 0;
  top: 0;
}

h3 {
  margin-top: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>DevDoWeb.com</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="=width=1920, initial-scale=1.0, user-scalable=yes">
  <link rel="stylesheet" type="text/css" href="styleSheet.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <div class="header">
    <h3 class="headerText">Test</h3>
  </div>
</body>

</html>

09-10 05:32
查看更多