Question

所以我不熟悉编码和东西，我想知道为什么在this fiddle的div之间有一个空间？

HTML ：

<!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之间。任何人都知道什么是错的，因为我无法找到它。

Answer 1

h4和p元素具有边距设置。您可以使用“检查”选项右键单击浏览器中的元素。

Answer 2

好用：

* {margin:0;padding:0;}

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

注意：在html中，文档本身有默认空间。所以通过上面的CSS你可以轻松删除它们。

在每个样式表文件中使用上面的CSS是一个好习惯。

Answer 3

这是因为您没有reset the default页眉元素的边距。

使用

重置默认值

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

在表格的顶部。

＆＃13;

  * {
  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

＆＃13;

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

＆＃13;

Answer 4

绿色是体色。没有背景颜色的元素在哪里有体色，因为没有任何东西与它重叠。

CSS boxmodel将会有所帮助：https://www.w3schools.com/css/css_boxmodel.asp

边距属性是元素的外部部分。

Answer 5

解决了：

h3,h4,p{
  margin:0;
}
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>

Answer 6

您可以指定（添加到现有）以下css，并删除空格。

.about-text {
  overflow: hidden;
}

.collection {
  overflow: hidden;
}

谁能告诉我为什么我的div之间有空间？

6 个答案: