#padding #
盒模型的边框与内容之间的距离，也就是内边距
#padding与背景 #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>首页布局</title>
<link rel="stylesheet" href="">
<style>
div{
background-color: gray;
padding:30px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
HELLO WORLD
</div>
</body>
</html>
此时的灰色面积是160*160， 文字的宽高是100，加上padding30
#padding举例 #
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>首页布局</title>
<link rel="stylesheet" href="">
<style>
#container{
width: 1020px;
background-color: gray;
}
#header{
height: 120px;
background-color: blue;
margin: 10px;
}
#main{
height: 600px;
background-color: orange;
margin: 10px;
}
#lside{
float: left;
margin: 5px;
width: 700px;
height: 550px;
background-color: pink;
}
.four{
float: left;
margin: 10px;
width: 300px;
height: 230px;
background-color: yellow;
padding:10px;
}
#rside{
float: right;
margin:5px;
width:280px;
height:550px;
background-color: pink;
}
#footer{
height: 120px;
background-color: green;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside">
<div class="four">hello world</div>
<div class="four">hello world</div>
<div class="four">hello world</div>
<div class="four">hello world</div>
</div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
近期评论