盒子模型-margin的使用

来源：互联网发布：爱迪星微信营销软件编辑：程序博客网时间：2024/06/07 06:27

margin:两个盒子之间的距离

可以使用
<style>
    div{
     margin:20px;
    }
</style>
这样子的话，所有的div的边距都是20px的距离

如果使用#test{
     margin:20px;
    }
那么id为test的标签则为20px

但是这种指定方法是标签的四个方向都指定为20px，如果需要指定上下左右，则可以使用
margin-top:20px;
margin-right:30px;
margin-botton:40px;
margin-left:50px;
可以这样设置，或者也可以只用以下的方式来设置
margin:10px,20px,那么上下都是10px，左右都是20px.因为是先从上面开始分配，然后顺时针分配，如果没分配到的话，则取对边的值。
如果是margin:10px,20px,30px.那么上下分别是10px,30px,左右是20px
如果是margin:10px,20px,30px,40px,那么上下左右分别是10px,30px,20px,40px.

<style>
   #cont{
       width:1000px;
       height:600px;
       background: green;
   }

   div {
       width:400px;
       height:200px;
       float:left;
   }

   #test{
       /*
       margin:10px;
       */
       /*

       margin-top:10px;
       margin-left: 20px;
       margin-bottom: 30px;
       margin-right: 40px;
       */

       /*margin:10px 20px;*/
       margin: 10px 20px 30px;
       background: red;
   }

   #test2 {
       background: orange;
   }

   #test3{
       width:1000px;
       background: blue;
   }
</style>
</head>
    <body>
       <div id="cont">
           <div id="test"></div>
           <div id="test2"></div>
           <div id="test3"></div>
       </div>
    </body>
</html>

0 0