如何去除div元素之间的空白答案

【问题标题】：How to remove white space between div elements如何去除div元素之间的空白
【发布时间】：2015-12-01 09:26:27
【问题描述】：

我创建了一个带有 3 个 div 标签的网页，每个 div 中都有一些内容，并且为 div 元素设置了背景颜色，我发现 div 元素之间出现了一些空白。我已经尝试了很多使用各种属性（如outline、margin、padding 等）来删除这些空白，但我失败了。我想删除 div 之间的空格，而不使用 'float' 属性。 webpage snapshot

<!DOCTYPE html>
<html>
<head>
<style>
body
{
    margin:0px;
    background-color:green;
}
.container
{
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10%;
    margin-right:10%;
}
.head
{
    background-color:gray;
}
.nav
{
    background-color:blue;
}
.content
{
    background-color:lime;
}
</style>
</head>
<body>
<div class="container">
    <div class="head">
        <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
        <h2>some text</h2>
    </div>
    <div class="content">
        <p>Some text in content</p>
    </div>
</div>
</body>
</html>

【问题讨论】：

空白是由于你的 h1,h2,h3,p 标签。
如果是这样，那么如何在不删除标签的情况下删除它们？
How to remove margin space around body or clear default css styles的可能重复
将p、h1 和h2 边距设置为0。检查答案

标签： html css

【解决方案1】：

h1, h2, p {
    margin: 0;
}

浏览器默认在标题元素和段落上添加margins。您通过 CSS 将其删除。

【讨论】：

【解决方案2】：

你的 div 之间的空间是因为默认的 h 和 p 元素的边距。我只添加了这个 CSS 规则来覆盖默认边距：

h1, h2, p{
  margin: 0;
}

请检查这个sn-p：

body{
    margin:0px;
    background-color:green;
}
.container{
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10%;
    margin-right:10%;
}
.head{
     background-color:gray;
}
.nav{
    background-color:blue;
}
.content{
    background-color:lime;
}
h1, h2, p{
  margin: 0;
}

<body>
<div class="container">
    <div class="head">
        <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
        <h2>some text</h2>
    </div>
    <div class="content">
        <p>Some text in content</p>
    </div>
</div>
</body>

【讨论】：

【解决方案3】：

默认情况下，h1、h2、p 标签下方有一个边距。您可以通过在包含的 div 或标签本身中使用负边距来达到预期的效果

（我确实不像大多数其他答案一样推荐后者，因为它会影响页面中的每个 h1、h2、p 标签）

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0px;
      background-color: green;
    }
    .container {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10%;
      margin-right: 10%;
    }
    .head {
      background-color: gray;
      margin-bottom: -21px;
    }
    .nav {
      background-color: blue;
      margin-bottom: -21px;
    }
    .content {
      background-color: lime;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">
      <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
      <h2>some text</h2>
    </div>
    <div class="content">
      <p>Some text in content</p>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案4】：

空白是由h1、h2,和p标签上的边距引起的，请尝试将边距设置为0之类的

h1,h2,p{
  margin:0px;
  }

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0px;
      background-color: green;
    }
    .container {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10%;
      margin-right: 10%;
    }
    .head {
      background-color: gray;
    }
    .nav {
      background-color: blue;
    }
    .content {
      background-color: lime;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">
      <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
      <h2>some text</h2>
    </div>
    <div class="content">
      <p>Some text in content</p>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案5】：

标题标签上的margin 在包含<div> 之外呈现。

信不信由你，但这是设计使然。如果有人想详细说明为什么 CSS 会这样工作，我想听听。我作为网页设计师工作了 10 多年，但有时我仍然会犯这个错误，因为它对我来说太不直观了。

【讨论】：

【解决方案6】：

您的问题是由 h1、h2 和 p 上的边距而不是 div 上的边距引起的，因此您需要做的就是删除这些边距。正如您在link中看到的那样

h1, h2, p {
    margin:0;
}

【讨论】：