垂直div之间的空格[重复]答案

【问题标题】：Blank spaces between vertical divs [duplicate]垂直div之间的空格[重复]
【发布时间】：2017-04-06 10:00:38
【问题描述】：

我对 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>

【问题讨论】：

欢迎来到 Stack Overflow！请阅读How to Ask。关键词：“搜索和研究”和“解释......任何阻碍你自己解决的困难”。
删除 h1 边距。 h1 { 边距：0; }
将您的 H1 标签更新为： h1 {font-family: "Footlight MT Light";字体大小：52px；白颜色;字体粗细：粗体；边距：0；填充：0； }

标签： html css blank-line

【解决方案1】：

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

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>

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

【讨论】：

是的！非常感谢您的帮助！！