                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)

兩個(gè)div元素上下排列時(shí)如何清除之間的空隙

如圖，margin和padding都設(shè)為0了

00:03

慕粉4076523

2016-10-17

源自：企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn) 3-4

關(guān)注問題我要回答

14610

操作

收起

5 回答

C0EEC3F7BBAA 回答被采納 +3 積分
2016-10-17

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

即便不設(shè)置*{margin:0;padding:0;}

兩個(gè)div間也應(yīng)該是沒有間隙的

你檢查一下是不是哪個(gè)margin設(shè)置錯(cuò)了吧

或者給相關(guān)的元素設(shè)置個(gè)border:1px solid red;看看是誰在占位置

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕粉4076523 提問者

看看下面

2016-10-17 回復(fù) 有任何疑惑可以回復(fù)我~

#2

慕粉4076523 提問者

非常感謝！

2016-10-17 回復(fù) 有任何疑惑可以回復(fù)我~

C0EEC3F7BBAA
2016-10-18

你的logo_right的margin導(dǎo)致的··

善用瀏覽器調(diào)試功能，按F12·

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕粉4076523 提問者

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

2016-10-18 回復(fù) 有任何疑惑可以回復(fù)我~

慕粉4076523 提問者
2016-10-18

<!DOCTYPE?html>
<html>
<head>
??<title>慕課網(wǎng)</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="#">聯(lián)系我們</a></li>
??<li><a?onclick="AddFavorite(window.location,document.title)"?href="javascript:void(0)">加入收藏</a></li>
??<li><a?href="#"?onclick="SetHome(window.location)">設(shè)為首頁</li>
?</ul>
?</div>
?</div>
?<!--頁面頭部結(jié)束-->
<div?class="wrap">
<!--LOGO區(qū)-->
<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小時(shí)服務(wù)熱線：<span>123-456-7890</span>
</div>
</div>
<!--LOGO區(qū)-->

<!--導(dǎo)航區(qū)-->
<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">關(guān)于慕課</a></li>
???????<li><a?href="list.html">新聞動(dòng)態(tài)</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>
<!--導(dǎo)航區(qū)-->
</div>
<!--wrap結(jié)束-->
</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;不對(duì)，超鏈接產(chǎn)生的應(yīng)該在下面設(shè)置*/
}
.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;
}
/*頁頭結(jié)束*/

/*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結(jié)束*/

/*導(dǎo)航開始*/
.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導(dǎo)航結(jié)束*/