垂直 div 之间的空白

Question

我非常是 html 和 css 的新手（就在过去几天），我正在尝试创建一个网站。我找到了一堆与我的问题相关的答案，但仍然无法弄清楚如何修复我的代码并删除 div 之间的白色 space。任何帮助将不胜感激！我在下面包含了相关代码。谢谢！！！

<!DOCTYPE html>
<html>
<head>
<title>Budget Line of Business</title>
<style>
h1 {font-family: "Footlight MT Light";
       font-size: 52px; color: white; font-weight: bold; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}

li {
float: right;
}

li a {
display: block;
color: #FC4A1A;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #062f4f;
}

</style>
</head>
<body>
<div style="background-color:#f7b733;">
<ul><strong>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#ideas">Ideas</a></li>
  <li><a href="#work">Our Work</a></li>
  <li><a href="#us">About Us</a></li></strong>
</ul>
<h1><center>Let's Make Your Budget Experience Extraordinary</center></h1>
<p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
<p style="text-align: center;"><strong>^ (down button)</strong></p></p>       </div>
</div>

<div style="background-color:#4abdac;">
<h1 style="text-align: left;">Making budget offices better</h1>
</div>

<div style="background-color:#fc4a14;">
<h1 style="text-align:right;">Learn All About Budget</h1>
</div>

<div style="background-color:#062f4f;">
<h1 style="text-align: left;">We Make Technology Accessible</h1>
</div>

<div style="background-color:#DFDCE3;">
<h1 style="text-align:right;">Grow Your Career</h1>
</div>

</body>
</html>

Answer 1

p 和 h1 元素有默认边距，它会添加您在 DIV 之间看到的白色 space。您可以删除此边距（通过将其设置为 0），这样 div 之间将没有白色-space：

p {
  margin: 0;
}
h1{ 
  margin: 0;
}

这是一个工作示例：

h1 {font-family: "Footlight MT Light";
       font-size: 52px; color: white; font-weight: bold; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}

li {
float: right;
}

li a {
display: block;
color: #FC4A1A;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #062f4f;
}
p {
  margin: 0;
}
h1{ 
  margin: 0;
}

<div style="background-color:#f7b733;">
  <ul><strong>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#ideas">Ideas</a></li>
    <li><a href="#work">Our Work</a></li>
    <li><a href="#us">About Us</a></li></strong>
  </ul>
  <h1><center>Let's Make Your Budget Experience Extraordinary</center></h1>
  <p style="text-align: center;">SEE WHAT WE CAN DO FOR YOU</p>
  <p style="text-align: center;"><strong>^ (down button)</strong></p>
</div>

<div style="background-color:#4abdac;">
  <h1 style="text-align: left;">Making budget offices better</h1>
</div>

<div style="background-color:#fc4a14;">
  <h1 style="text-align:right;">Learn All About Budget</h1>
</div>

<div style="background-color:#062f4f;">
  <h1 style="text-align: left;">We Make Technology Accessible</h1>
</div>

<div style="background-color:#DFDCE3;">
  <h1 style="text-align:right;">Grow Your Career</h1>
</div>

Note that you also had some elements in your code that shouldn't be there, I removed them to make the html correct.

垂直 div 之间的空白

Blank spaces between vertical divs

html

css

blank-line