HTML 文本未对齐

Question

我的 HTML 文本不起作用，在 2 行文本的中间显示空白。我需要用 HTML 或 CSS 修复这个问题吗？我该如何解决？谢谢!OBS:我不知道为什么 Stack Overflow 现在显示红色背景。

#black {
  background-color: red;
}
#white {
  font-family: 'Oswald', sans-serif;
  margin-top: 6%;
  display: inline-block;
  margin-left: 6%;
  float: left;
  clear: both;
  margin: 0px;
}
#white h1 {
  text-align: center;
  color: #40BAD7;
  size: 50px;
}
#white span {
  background-color: rgba(255, 255, 255, 1);
}
#white2 {
  clear: both;
  margin-left: 5%;
  margin-top: 1%;
  float: left;
}
#white2 p {
  color: #40BAD7;
  float: left;
}
#white2 span {
  background-color: rgba(255, 255, 255, 1);
  float: left;
}

<div id="black">
  <div id="white">
    <h1><span>ONLINE HÁ MAIS DE 3 ANOS!</span></h1>
  </div>
  <div id="white2">
    <p><span>Isso mesmo! Começamos em meados de 2013, e agora temos mais de 3 anos de servidor!</span>
    </p>
    <p><span>Venha jogar com os maiores clãs de drift do Brasil, estamos te esperando!</span>
    </p>
  </div>
</div>

Answer 1

所有内容重叠 <div id="black"> .这就是你看不到红色的原因。

如果你想把段落放在一起给他们 margin: 0 .

#black {
  background-color: red;
}
#white {
  font-family: 'Oswald', sans-serif;
  margin-top: 6%;
  display: inline-block;
  margin-left: 6%;
  float: left;
  clear: both;
  margin: 0px;
}
#white h1 {
  text-align: center;
  color: #40BAD7;
  size: 50px;
}
#white span {
  background-color: rgba(255, 255, 255, 1);
}
#white2 {
  clear: both;
  margin-left: 5%;
  margin-top: 1%;
  float: left;
}
#white2 p {
  color: #40BAD7;
  float: left;
  margin: 0;
}
#white2 span {
  background-color: rgba(255, 255, 255, 1);
  float: left;
}

<div id="black">
  red
  <div id="white">
    <h1><span>ONLINE HÁ MAIS DE 3 ANOS!</span></h1>
  </div>
  <div id="white2">
    <p><span>Isso mesmo! Começamos em meados de 2013, e agora temos mais de 3 anos de servidor!</span>
    </p>
    <p><span>Venha jogar com os maiores clãs de drift do Brasil, estamos te esperando!</span>
    </p>
  </div>
</div>