两个div元素上下排列时如何清除之间的空隙
如图，margin和padding都设为0了
5 回答
<!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;看看是谁在占位置
<!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/150
提交
取消
