Question

我非常新的（就像过去几天一样）html和css，我正在尝试创建一个网站。我找到了一些与我的问题相关的答案，但仍然无法弄清楚如何修复我的代码并删除div之间的空白区域。任何帮助将非常感激！我在下面列出了相关代码。感谢!!!

<!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

h1和p { margin: 0; } h1{ margin: 0; }元素具有默认边距，这会添加您在DIV之间看到的空白区域。您可以删除此边距（通过将其设置为0），这样div之间就不会有空格：

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>

{{1}}

请注意，您的代码中也有一些不应该存在的元素，我删除它们以使html正确。

垂直div之间的空格

1 个答案: