两个垂直div之间的空白区域...如何删除它？

Question

嗨我在删除标题和内容之间的空格时遇到了问题，这些空格位于div标签中。我试过很多东西，我在谷歌和其他教程中搜索但无法找到解决方案。任何帮助，将不胜感激。

这是我的代码：

/*--------------general-----------------*/
body {
	margin: 0;
	padding: 0;
}

/*------------header--------------------*/

#header {
	background-color: #d4e6d5;
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
}

#header #navigation {
	width: 1100px;
	background-color: red;
	margin-left: 133px;
	
}

#navigation ul {
	list-style: none;
	width: 685px;
	margin-left: 173px;
}

#navigation #nav-meny {
	display:inline-block;
	border:solid;
	border-bottom: none;
}

#navigation li a{
	text-decoration: none;
	display: inline-block;
	padding: 20px;
	padding-left: 40px;
	padding-right: 40px;
	color: black;
	font-size: 16px;
	font-weight: bold;
	background-color: teal;
}

#navigation li a:hover {
	background-color: yellow;
}

/*------------------ contenti ---------------*/

#content {
	width: 1100px;
	background-color: grey;
	margin-left: 133px;
	min-height: 580px;
}

#content h3 {
	margin-left: 20px;
	margin-top: 20px;  
	/*gives margin top to whole content div???*/
}


/*---------------- footeri --------------------*/

#footer {

}

#footer p {

}

<div id="header">
	  
	  	<div id="navigation">
	  		
	  		<ul>
	  			<li id="nav-meny"><a href="#">Tabi1</a></li>
	  			<li id="nav-meny"><a href="#">Tabi2</a></li>
	  			<li id="nav-meny"><a href="#">Tabi3</a></li>
	  			<li id="nav-meny"><a href="#">Tabi4</a></li>
	  			<li id="nav-meny"><a href="#">Tabi5</a></li>
		  	</ul>

	  	</div>   <!-- end of navigation -->

	  </div> <!--end of header -->

	
	<div id="content">

		<!-- Content here -->
  		<h3> Here will be content...</h3>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
  			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.\</p>


	</div> <!-- end of content-->

	

	<div id="footer">

	<p>Here is footer...</p>

	</div> <!-- end of footer-->

我在这个网站上搜索了这个问题，但找不到帮助我的解决方案...... 谢谢您的时间:)）

Answer 1

这样做有两件事：

标题中margin-bottom的
1. ul - 您必须将其删除
margin-top中的h2的{​​li> #content。将overflow: hidden添加到#content，保证金将保留在#content内（我认为这就是您想要的）。

段：

＆＃13;
＆＃13;
/*--------------general-----------------*/
body {
	margin: 0;
	padding: 0;
}

/*------------header--------------------*/

#header {
	background-color: #d4e6d5;
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
}

#header #navigation {
	width: 1100px;
	background-color: red;
	margin-left: 133px;
	
}

#navigation ul {
	list-style: none;
	width: 685px;
	margin-left: 173px;
	margin-bottom: 0;  /* <------------ new */
}

#navigation #nav-meny {
	display:inline-block;
	border:solid;
	border-bottom: none;
}

#navigation li a{
	text-decoration: none;
	display: inline-block;
	padding: 20px;
	padding-left: 40px;
	padding-right: 40px;
	color: black;
	font-size: 16px;
	font-weight: bold;
	background-color: teal;
}

#navigation li a:hover {
	background-color: yellow;
}

/*------------------ contenti ---------------*/

#content {
	width: 1100px;
	background-color: grey;
	margin-left: 133px;
	min-height: 580px;
	overflow: hidden; /* <------------ new */
}

#content h3 {
	margin-left: 20px;
	margin-top: 20px;
	/*gives margin top to whole content div???*/
}


/*---------------- footeri --------------------*/

#footer {

}

#footer p {

}
＆＃13;
<div id="header">
	  
	  	<div id="navigation">
	  		
	  		<ul>
	  			<li id="nav-meny"><a href="#">Tabi1</a></li>
	  			<li id="nav-meny"><a href="#">Tabi2</a></li>
	  			<li id="nav-meny"><a href="#">Tabi3</a></li>
	  			<li id="nav-meny"><a href="#">Tabi4</a></li>
	  			<li id="nav-meny"><a href="#">Tabi5</a></li>
		  	</ul>

	  	</div>   <!-- end of navigation -->

	  </div> <!--end of header -->

	
	<div id="content">

		<!-- Content here -->
  		<h3> Here will be content...</h3>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
  			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.\</p>


	</div> <!-- end of content-->

	

	<div id="footer">

	<p>Here is footer...</p>

	</div> <!-- end of footer-->
＆＃13;
＆＃13;
＆＃13;

Answer 2

H3＆和UL本质上有利润，您需要将它们设置为0以消除差距

#navigation ul {
  list-style: none;
  width: 685px;
  margin-left: 173px;
  margin-bottom: 0;
}
#content h3 {
    margin-left: 20px;
    margin-top: 0px;  
    /*gives margin top to whole content div???*/
}

修改

哦，如果你想拉伸容器，请使用填充物而不是边距。

#content h3 {
  padding-left: 20px;
  padding-top: 20px;
  margin-top: 0px;
  /*gives margin top to whole content div???*/
}

Answer 3

将此添加到您的css文件中：

*{
    margin:0px;
}

JSFiddle：http://jsfiddle.net/leonard01/vrpmwnnv/1/