logo标签列表

如何移除div元素之间的空白间隔

htmlcss
6

I created a web page with 3 div tags with some content in each div and with background colors set to the div elements I found some white space appearing between the div elements. I have tried a lot to remove these white space using various properties like outline, margin, padding etc, but I failed. I want to remove white spaces between my div without using 'float' property. 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标签造成的。 - faerin
如果是这样，那么如何在不删除标签的情况下将它们移除？ - Lalit Pal
1
可能是重复的问题，参考如何去除body周围的边距或清除默认的CSS样式。 - Alex
е°†pпәЊh1е’Њh2зљ„иң№и·қи®ңдёғ0гЂ‚жӘЂжџӨз­”жҰ€гЂ‚ - Collins Abitekaniza
6个回答
8
h1, h2, p {
    margin: 0;
}

浏览器默认给标题元素和段落添加外边距（margins）。您可以通过CSS来移除它。

4
你的div之间的空隙是由于默认的和

元素的外边距。我添加了以下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>

3

、

和

标签默认带有下方边距。您可以通过在包含的

中或标签本身中使用负边距来实现所需效果。

（我不建议像其他答案一样使用后者，因为它会影响页面中的每个

、

和

标签）

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

2

白色空间是由于你的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>

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

信不信由你，但这是有意设计的。如果有人愿意说明CSS为什么会这样工作，我想听听。我已经做了10+年的网页设计师了，有时仍然会犯这个错误，因为它对我来说是如此不直观。

2
您的问题是由于h1、h2和p标签上的margin引起的，而不是div上的，因此您只需要删除这些margin即可。您可以在这个链接中看到。
h1, h2, p {
    margin:0;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接