按理說介個運行出來應該是之間有白色邊界的(圖片圈出來的地方)但是為什么它沒有呢,是哪里寫錯了還是寫少了啥

附上代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動定位</title>
<style>
*{
/*默認樣式清零*/
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
#container{
margin: 0 auto;/*居中*/
width: 1000px;
height: 500px;
/*background-color: #6cf;*/
}
#header{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;/*與下面main部分之間有個空白分割*/
}
#main{
height: 500px;
background-color: #cff;
margin-bottom:5px;
}
#aside{
float: left;
width: 300px;
height: 500px;
background-color: #6cf;
}
#content{
float: right;/*left也行但是中間的空隙沒了,也可aside的margin-right:5px就有空隙*/
width: 695px;
height: 500px;
background-color: #cff;
}
#foot{
height: 60px;
background-color: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
uj5u.com熱心網友回復:
#main {height: 500px;
background-color: #cff;
margin-bottom: 5px;
}
你這里給 #main 賦了背景色,你圈的地方是有空隙的,只是顏色看不出來而已
你可以學習一下怎么用 f12 來檢查html元素,這個方法很容易發現問題的
uj5u.com熱心網友回復:
#main 背景色去掉然后在
#content {
float: right;
box-sizing: border-box;
padding-left: 20px;
width: 695px;
height: 500px;
background-color: #cff;
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/10640.html
標籤:HTML(CSS)
下一篇:echarts自適應
