HTML/CSS margin

来源：互联网发布：淘宝评价雷锋侠编辑：程序博客网时间：2024/06/07 02:22

margin 是不同div之间的距离

一个div上下左右距离其他div多远

1、margin:10px 15px 10px 15px;

2、margin:10px ;

3、margin:10px 15px ;

4、margin-top:10px ;

margin-right:15px;

margin-bottom:10px;

margin-left:15px;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>布局02---margin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">

</script>

<style type="text/css">
#container{
   width:1300px;
   background:gray;
}
#header{
   height:120px;
   background:red;
}
#main{
   height:600px;
   background:green;
}
#left{
   float:left;
   width:900px;
   height:600px;
   background:pink;
}
.four{
   float:left;
   width:400px;
   height:250px;
   margin:10px 15px 10px 15px;
   background:purple;
}
#right{
   float:right;
   width:400px;
   height:600px;
   background:purple;
}
#footer{
   height:120px;
   background:yellow;
}
</style>
</head>
    <body>
   <div id=container>
       <div id=header></div>
       <div id=main>
           <div id=left>
               <div class=four></div>
               <div class=four></div>
               <div class=four></div>
               <div class=four></div>
           </div>
           <div id=right></div>
       </div>
       <div id=footer></div>
    </div>
   </body>
</html>

0 0