029-盒子模型（外边距）

最新推荐文章于 2023-03-18 18:33:45 发布

一只老黄牛

最新推荐文章于 2023-03-18 18:33:45 发布

阅读量77

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36150351/article/details/113444444

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>盒子模型-外边距</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px solid red;

            /* 
                外边距（margin）
                    - 外边距不会影响盒子可见框的大小
                    - 但是外边距会影响盒子的位置
                    - 一共有四个方向的外边距
                        margin top
                            - 上外边距,设置一个正值，元素会向下移动
                        margin right
                            - 默认情况下设置margin-right不会产生任何效果
                        margin bottom 
                            - 下外边距，设置一个正值，其下边的元素会向下移动
                        margin left
                            - 左外边距，设置一个正值，元素会向右移动


                        - margin也可以设置负值，如果是负值则元素会向相反的方向移动

                    - 元素在页面中是按照自左向右的顺序排列的
                        所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                        而设置下和右外边距会移动其他元素

                    - margin的简写属性
                        margin 可以同时设置四个方向的外边距，用法和padding一样

                    - margin会影响盒子实际占用空间
             */

            /* margin-top: 100px;
             margin-left: 100px;*/

            /* margin-top: -100px;
            margin-left: -100px;
            margin-bottom: -100px;  */

            margin: 100px;
        }

        .box2 {
            width: 220px;
            height: 220px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>