文章/答案/技术大牛

发布

社区首页 >问答首页 >有人能告诉我为什么在我的div之间有<body>空间吗？

问有人能告诉我为什么在我的div之间有<body>空间吗？
EN

Stack Overflow用户

提问于 2017-08-26 17:31:28

回答 6查看 90关注 0票数 0

所以我对编码和其他东西还不熟悉，我想知道为什么在这把小提琴中的div之间有一个身体的空间？

<!DOCTYPE html>

<html lang="en">
<head>
  <title>title</title>
  <link href="main.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
</head>
  <!-- body -->
<body>
  <div class="top-navbar navbar" id="color-1">
    <a href="about.html">About</a>
    <a href="art.html">Art</a>
    <a href="home.html">Home</a>
  </div>

  <div class="image">
    <img src="sgrumble.png" alt="sg-rumble" class="front-image">
  </div>

  <div class="top-bar-2 navbar" id="color-1">
    <a href="#project">Project</a>
    <a href="#divname">Champions</a>
    <a href="#divname2">divname2</a>
    <a href="#divname3">divname3</a>
  </div>

  <div class="about-text" id="color-1">
    <h4>title</h4>
    <p>short info text about text text text text text text text text text</p>
  </div>

  <div class="collection art" id="project color-2">
    <h3>text</h3>
    <p>text.</p>

    <div class="project-blue">
      <img src="/asset/images/project-ashe256x256.png" class="project-ashe">
    </div>

CSS

body {
    margin: 0;
    padding: 0;
  background-color: green;
}
#color-1 {
    background-color: #d3d3d3;
}
#color-2 {
    background-color: #fff;
}
.top-navbar {
    width: 100%;
    height: 50px;
}
.top-navbar a {
    padding: 14px 16px;
    text-align: center;
    float: right;
    display: block;
    color: black;
    text-decoration: none;
}
.top-navbar a:hover {
    background-color: #8a8a8a;
}
.image {
    width: 100%;
    height: 491px;
    background-color: red;
}
.top-bar-2 {
    width: 100%;
    height: 50px;
    text-align: center;
}
.top-bar-2 a {
    padding: 14px 16px;
    text-align: center;
    display: inline-block;
    color: black;
    text-decoration: none;
}
.top-bar-2 a:hover {
    background-color: #8a8a8a;
}
.collection {
    height: 300px;
    width: 100%;
    text-align: center;
    background-color: blue

绿色部分，即身体，在第二个肚脐和两个文本div之间显示。任何人都知道什么是错的，因为我找不到。

html

css

alignment

回答 6

Stack Overflow用户

发布于 2017-08-26 17:45:00

h4和p元素有一个边距集。您可以看到，使用“检查”选项右键单击浏览器中的元素。

票数 2

Stack Overflow用户

发布于 2017-08-26 17:49:48

它的好处是：

* {margin:0;padding:0;}

这将删除文档中的每个空格。

注意:在html中，文档本身具有默认空间。因此，通过上面的CSS，您可以轻松地删除它们。

在每个样式表文件中使用上面的CSS是一个很好的实践。

票数 1

Stack Overflow用户

发布于 2017-08-26 17:43:16

之所以会出现这种情况，是因为您没有标头元素的重置默认值边距。

使用

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

在你的床单上。

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  margin: 0;
  padding: 0;
  background-color: green;
}

#color-1 {
  background-color: #d3d3d3;
}

#color-2 {
  background-color: #fff;
}

.top-navbar {
  width: 100%;
  height: 50px;
}

.top-navbar a {
  padding: 14px 16px;
  text-align: center;
  float: right;
  display: block;
  color: black;
  text-decoration: none;
}

.top-navbar a:hover {
  background-color: #8a8a8a;
}

.image {
  width: 100%;
  height: 491px;
  background-color: red;
}

.top-bar-2 {
  width: 100%;
  height: 50px;
  text-align: center;
}

.top-bar-2 a {
  padding: 14px 16px;
  text-align: center;
  display: inline-block;
  color: black;
  text-decoration: none;
}

.top-bar-2 a:hover {
  background-color: #8a8a8a;
}

.collection {
  height: 300px;
  width: 100%;
  text-align: center;
  background-color: blue

<!DOCTYPE html>

<html lang="en">

<head>
  <title>title</title>
  <link href="main.css" rel="stylesheet" type="text/css">
  <meta charset="UTF-8">
</head>
<!-- body -->

<body>
  <div class="top-navbar navbar" id="color-1">
    <a href="about.html">About</a>
    <a href="art.html">Art</a>
    <a href="home.html">Home</a>
  </div>

  <div class="image">
    <img src="sgrumble.png" alt="sg-rumble" class="front-image">
  </div>

  <div class="top-bar-2 navbar" id="color-1">
    <a href="#project">Project</a>
    <a href="#divname">Champions</a>
    <a href="#divname2">divname2</a>
    <a href="#divname3">divname3</a>
  </div>

  <div class="about-text" id="color-1">
    <h4>title</h4>
    <p>short info text about text text text text text text text text text</p>
  </div>

  <div class="collection art" id="project color-2">
    <h3>text</h3>
    <p>text.</p>

    <div class="project-blue">
      <img src="/asset/images/project-ashe256x256.png" class="project-ashe">
    </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45898014

复制

相似问题

问有人能告诉我为什么在我的div之间有<body>空间吗？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有人能告诉我为什么在我的div之间有<body>空间吗？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有人能告诉我为什么在我的div之间有<body>空间吗？
EN