亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

兩個div元素上下排列時如何清除之間的空隙

如圖，margin和padding都設為0了

00:03

慕粉4076523

2016-10-17

源自：企業網站綜合布局實戰 3-4

關注問題我要回答

14572

操作

收起

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>

即便不設置*{margin:0;padding:0;}

兩個div間也應該是沒有間隙的

你檢查一下是不是哪個margin設置錯了吧

或者給相關的元素設置個border:1px solid red;看看是誰在占位置

0 回復有任何疑惑可以回復我~

#1

慕粉4076523 提問者

看看下面

2016-10-17 回復有任何疑惑可以回復我~

#2

慕粉4076523 提問者

非常感謝！

2016-10-17 回復有任何疑惑可以回復我~

C0EEC3F7BBAA
2016-10-18

你的logo_right的margin導致的··

善用瀏覽器調試功能，按F12·

1 回復有任何疑惑可以回復我~

#1

慕粉4076523 提問者

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

2016-10-18 回復有任何疑惑可以回復我~

慕粉4076523 提問者
2016-10-18

<!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 回復有任何疑惑可以回復我~

C0EEC3F7BBAA
2016-10-18

忘記了··margin在邊框外面··邊框看不出來··你把代碼發上來看一下吧要不

0 回復有任何疑惑可以回復我~

#1

慕粉4076523 提問者

嗯嗯，代碼有點多誒

2016-10-18 回復有任何疑惑可以回復我~

慕粉4076523 提問者
2016-10-17

不行呀。不過剛剛設置了一個框，它就緊挨著logo區，突然想到我后面的導航區整個都是浮動的，難道不應該蓋在logo區上面？

0 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

企業網站綜合布局實戰

參與學習 157039 人
解答問題 2157 個

本課程重點介紹HTML/CSS實現常見企業網站布局的方法

本課相似問答

4 回答兩個div之間有迷之空隙,找了很多辦法都不行,求大神!!!

2 回答子元素有浮動，為什么不給父元素清除浮動？

2 回答兩個浮動的盒子之間為什么有縫隙在Google上面有在360沒有

2 回答為什么li之間有間隙？

3 回答main和上面的部分中間有一段空隙怎么辦

搜索更多本課相關問答

兩個div元素上下排列時如何清除之間的空隙

我要回答關注問題

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號

<nav id="gj0s4"></nav>