两个div元素上下排列时如何清除之间的空隙-慕课网

首页课程实战体系课手记专栏慕课教程

两个div元素上下排列时如何清除之间的空隙

来源：3-4 企业网站制作之导航部分制作（一）

慕粉4076523

2016-10-17 16:10

如图，margin和padding都设为0了

写回答关注

5回答

C0EEC3F7BBAA

2016-10-17 16:45:00

已采纳
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background: yellow;
}
.box2{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
```
即便不设置*{margin:0;padding:0;}
两个div间也应该是没有间隙的
你检查一下是不是哪个margin设置错了吧
或者给相关的元素设置个border:1px solid red;看看是谁在占位置
2 0

慕粉4076...

非常感谢！

2016-10-17 23:25:20

共 2 条回复 >
C0EEC3F7BBAA

2016-10-18 15:19:09

你的logo_right的margin导致的··
善用浏览器调试功能，按F12·

1 1

慕粉4076...

知道了，超感谢，get新技能 O(∩_∩)O~~

2016-10-18 15:37:38

共 1 条回复 >

慕粉4076523: 2016-10-18 13:31:06

<!DOCTYPE html>
<html>
<head>
  <title>慕课网</title>
  <link href="css1.css" rel="stylesheet" type="text/css">
  <meta content="text/html" charset="utf-8">
<script src="参考代码/js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>
</head>

<body>
<!--页面头部开始-->
<div class="top">
<div class="top_content">
 <ul>
  <li><a href="#">联系我们</a></li>
  <li><a onclick="AddFavorite(window.location,document.title)" href="javascript:void(0)">加入收藏</a></li>
  <li><a href="#" onclick="SetHome(window.location)">设为首页</li>
 </ul>
 </div>
 </div>
 <!--页面头部结束-->
<div class="wrap">
<!--LOGO区-->
<div class="logo">
<div class="logo_left">
<img src="images/logo.jpg" alt="mukewang">
</div>
<div class="logo_right">
<img src="images/tel.jpg" alt="tel">24小时服务热线：<span>123-456-7890</span>
</div>
</div>
<!--LOGO区-->

<!--导航区-->
<div class="nav">
 <div class="nav_left">
 </div>
 <div class="nav_middle">
   <div class="nav_middle_left">
     <ul>
       <li><a href="#">首页</a></li>
       <li><a href="list.html">关于慕课</a></li>
       <li><a href="list.html">新闻动态</a></li>
       <li><a href="list.html">课程中心</a></li>
       <li><a href="list.html">在线课程</a></li>
       <li><a href="list.html">人才招聘</a></li>
     </ul>
   </div>
   <div class="nav_middle_right">
     <form action="" method="post">
       <input type="text" class="text" />
     </form>
   </div>
 </div>
 <div class="nav_right"></div>
</div>
<!--导航区-->
</div>
<!--wrap结束-->
</body>
</html>

body{
     font-size: 12px;
     background-color: #f5f5f5;
}

.wrap{
  width: 1000px;
  margin:0 auto;
}

/*页头*/
.top{
  height: 27px;
  background: url(images/top_bg.jpg) repeat-x;
  width: 100%;
}
.top_content{
  width: 1000px;
  margin:0 auto;
  line-height: 27px;
}
.top_content li{
  float: right;
  list-style-image: url("images/arrow.jpg");
  width: 70px;
  color: #f5f5f5;
  background-position: center left;
  /*text-decoration: none;不对，超链接产生的应该在下面设置*/
}
.top_content a:link,.top_content a:visited{
  color:#8e8e8e;
  text-decoration: none;/*超链接不要下划线*/
}
.top_content a:hover,.tip_content a:atcive{
  color: #900;
  text-decoration: none;
}
/*页头结束*/

/*logo开始*/
.logo{
  height: 80px;
  background-color: white;
  margin: 0;
  padding: 0;
  border: 1px solid red;
}
.logo_left{
  float: left;
}
.logo_right{
  float: right;
  color: #8e8e8e;
  width: 300px;
  margin:30px;
}
.logo_right span{
  color:red;
  font-size: 25px;
  font-weight:bold;
  font-family: "sans-serif";
}
.logo_right img{
  vertical-align: middle;
  margin-right: 10px;
}
/*logo结束*/

/*导航开始*/
.nav{
 height: 40px;
float: left;
margin: 0;
padding:0;
border: 1px solid red;
}

.nav_left{
  width: 10px;
  background: url(images/nav_left.jpg)no-repeat;
  float: left;
  height: 40px;
}
.nav_middle{
  width: 980px;
  float: left;
  background: url(images/nav_bg.jpg) repeat-x;
  height: 40px;

}
.nav_right{
  width: 8px;
  background: url(images/nav_right.jpg) no-repeat;
  float: left;
  height: 39px;
}
.nav_middle_left li{
  float: left;
  width: 90px;
  list-style: none;
  font-size: 16px;
  height: 40px;
  text-align: center;
}
.nav_middle_left a:link,.nav_middle_left a:visited{
  color: white;
  text-decoration: none;
}
.nav_middle_left a:hover{
  color: yellow;
}
.nav_middle_left{
  width: 680px;
  float: left;
}
.nav_middle_right{
  width: 300px;
  float: left;
}
.nav_middle_right .text{
  background: url(images/search.jpg)no-repeat center right;
  height: 25px;
  margin-top: 5px;
  background-color: white;
  padding-right: 25px;
  border: 1px solid white;
}
/*l导航结束*/

0 0

C0EEC3F7BBAA

2016-10-18 08:42:53

忘记了··margin在边框外面··边框看不出来··你把代码发上来看一下吧要不

1 0

慕粉4076...

嗯嗯，代码有点多诶

2016-10-18 13:30:28

共 1 条回复 >
慕粉4076523

2016-10-17 23:23:59

不行呀。不过刚刚设置了一个框，它就紧挨着logo区，突然想到我后面的导航区整个都是浮动的，难道不应该盖在logo区上面？

0 0

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题

两个div之间有迷之空隙,找了很多办法都不行,求大神!!!

回答 4

子元素有浮动，为什么不给父元素清除浮动？

回答 2

两个浮动的盒子之间为什么有缝隙在Google上面有在360没有

回答 2

为什么li之间有间隙？

回答 2

main和上面的部分中间有一段空隙怎么办

回答 3

打开慕课网App查看更多内容