css--盒模型的外边距

最新推荐文章于 2022-08-07 12:59:18 发布

MondayCui

最新推荐文章于 2022-08-07 12:59:18 发布

阅读量627

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/MondayCui/article/details/108695377

版权

前端学习专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型-外边距</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: mediumseagreen;

            border:10px rosybrown solid;

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

            margin-bottom: 100px;
            
        }

        .box2{
            width: 220px;
            height: 220px;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

MondayCui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css--盒模型的外边距

外边距（margin） - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的位置 - 一共有四个方向的外边距： margin-top - 上外边距，设置一个正值，元素会向下移动 margin-right
复制链接

扫一扫

专栏目录