盒子模型-margin的使用

最新推荐文章于 2022-10-27 19:19:59 发布

fjr_huoniao

最新推荐文章于 2022-10-27 19:19:59 发布

阅读量2.1k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/kimyoungvon/article/details/18972001

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

fjr_huoniao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型-margin的使用

margin:两个盒子之间的距离可以使用 div{ margin:20px; }这样子的话，所有的div的边距都是20px的距离如果使用#test{ margin:20px; }那么id为test的标签则为20px但是这种指定方法是标签的四个方向都指定为20px，如果需要指定上下左右，则可以使用mar
复制链接

扫一扫