CSS盒子模型之外边距

最新推荐文章于 2022-10-10 10:47:10 发布

极客研究者

最新推荐文章于 2022-10-10 10:47:10 发布

阅读量306

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105568602

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

外边距:不会影响盒子的大小,但会影响盒子的位置
margin-top:
上边距,设置一个正值,元素会向下移动
margin-left:
左边距,设置一个正值,元素会向右移动
margin-right:
右边距,设置一个正值,下面的元素会向右移动
margin-bottom:
下边距,设置一个正值,下面的元素会向下移动

元素在页面中是按照自左向右进行排列的
默认情况下,我们设置左和上外边距将移动自身
设置右和下外边距将移动其他元素

margin可以设置负值,表示往相反方向走

margin简写属性；可以同时设置四个方向的值
会影响整个盒子的占用空间

只写两个值:上下外边距/左右外边距
值1 值2:
值1 auto
auto 值2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外边距</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            border: 5px solid red;

            margin-top: 20px;
            margin-left: 20px;

            margin-bottom: 50px;
            /* margin-right:50px; */
        }

        .box2 {

            width: 200px;
            height: 200px;
            background-color: salmon;
        }
    </style>
</head>

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

</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型之外边距

外边距:不会影响盒子的大小,但会影响盒子的位置margin-top:上边距,设置一个正值,元素会向下移动margin-left:左边距,设置一个正值,元素会向右移动margin-right:右边距,设置一个正值,下面的元素会向右移动margin-bottom:下边距,设置一个正值,下面的元素会向下移动元素在页面中是按照自左向右进行排列的默认情况下,我们设置左和上外边距将移动自身...
复制链接

扫一扫