Question

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

＆＃13;

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

＆＃13;

Answer 1

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

h1, h2, p{
  margin: 0;
}

请检查此代码段：

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>

Answer 2

h1, h2, p {
    margin: 0;
}

默认情况下，浏览器会在标题元素和段落上添加margins。你可以通过CSS删除它。

Answer 3

空格是由SET GLOBAL max_connections = 200;，h1和h2,标签上的边距引起的，请尝试将边距设置为p，如

＆＃13;

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

＆＃13;

Answer 4

标题标记上的margin呈现在包含<div>。

之外

信不信由你，但这是设计的。如果有人关心为什么CSS这样工作，我想听听它。我作为一名网络设计师已经工作了10多年，有时候我仍然犯了这个错误，因为它对我来说太不直观了。

Answer 5

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

中看到的那样

h1, h2, p {
    margin:0;
}

Answer 6

默认情况下，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>

如何删除div元素之间的空格

6 个答案: