Question

这是我的代码：

body {
  background-color: lightgray;
}

div {
  text-align: center;
  font-size: 75px;
  font-family: oswald light;
  color: white;
  background-color: #3c78d8;
}

h2 {
  text-align: center;
  font-size: 40px;
  font-family: oswald light;
  color: white;
  background-color: #3c78d8;
  border-collapse: collapse;
}

img {
  background-color: #3c78d8;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  padding: 25px 624px 25px 624px;
}

<div>header1</div>
<img src="2898chevronlogo.svg">
<h2>header2</h2>

使用内部CSS，我想摆脱的img和h2之间存在差距。

以下是差距的图片：

Answer 1

开发新页面时，应通过在CSS中添加以下内容来清除默认样式。

* {
  margin: 0;
  padding: 0;
}

这将解决您的问题：

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: lightgray;
}

div {
  text-align: center;
  font-size: 75px;
  font-family: oswald light;
  color: white;
  background-color: #3c78d8;
}

h2 {
  text-align: center;
  font-size: 40px;
  font-family: oswald light;
  color: white;
  background-color: #3c78d8;
  border-collapse: collapse;
}

img {
  background-color: #3c78d8;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  padding: 25px 624px 25px 624px;
}

<div>header1</div>
  <img src="2898chevronlogo.svg">
<h2>header2</h2>

Answer 2

将margin-top: 0;添加到h2标签的样式。

h2 {
  text-align: center;
  font-size: 40px;
  font-family: oswald light;
  color: white;
  background-color: #3c78d8;
  border-collapse: collapse;
  margin-top: 0;
}

Answer 3

只需尝试将margin-top: 0px;添加到您的h2声明中即可。

代码：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>2898 The Flying Hedgehogs</title>
<style>
    body {
        background-color:lightgray;
    }
    div  {text-align:center;
        font-size:75px;
        font-family:oswald light;
        color:white;
        background-color:#3c78d8;
    }
    h2 {
        text-align:center;
        font-size: 40px;
        font-family: oswald light;
        color:white;
        background-color: #3c78d8;
        border-collapse: collapse;
        margin-top: 0px;
    }
    img {
        background-color:#3c78d8;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        padding: 25px 624px 25px 624px;
    }
</style>
</head>
<body>
<div>header1</div>
<img src="2898chevronlogo.svg">
<h2>header2</h2>
</body>
</html>

Answer 4

在margin-top:0的样式中添加h2应该可以解决问题

<html lang="en">
<head>
<meta charset="UTF-8">
<title>2898 The Flying Hedgehogs</title>
<style>
    body {
        background-color:lightgray;
    }
    div  {text-align:center;
        font-size:75px;
        font-family:oswald light;
        color:white;
        background-color:#3c78d8;
    }
    h2 {
        margin-top:0; /*add this */
        text-align:center;
        font-size: 40px;
        font-family: oswald light;
        color:white;
        background-color: #3c78d8;
        border-collapse: collapse;
    }
    img {
        background-color:#3c78d8;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%;
        padding: 25px 624px 25px 624px;
    }
</style>
</head>
<body>
<div>header1</div>
<img src="2898chevronlogo.svg">
<h2>header2</h2>
</body>
</html>

我如何在这里消除这种差距？

4 个答案: