CSS盒模型-4.4外边距-margin左右属性值设为autoa时，可以设置元素左右居中显示-大厂面试中，经常问道的一个关于margin的问题！非常重要！块级叠加40内联60

本文链接：https://blog.csdn.net/qq_44280574/article/details/108265874

1.什么是外边距
外边距是指元素边框之外的区域
设置外边距会在元素外围创建额外的空白空间
外边距的作用是控制元素和元素之间的距离
使用margin属性来设置外边距
还可以使用margin-top、margin-bottom、margin-left、margin-right 分别控制元素不同方向的外边距
属性值可以是长度值或者百分比
当使用margin简写属性时，取值的含义与padding相同

2.居中显示
margin有一个很常用的特殊用法，
margin左右 *属性值设为autoa时，可以设置元素左右居中显示*例如：margin: 50px auto;

只设置margin-left: auto; 会左边margin撑开到最大，即元素到右边去啦
只设置margin-right: auto;会右边margin撑开到最大，即元素到左边去啦
同时设置margin-left: auto;
margin-right: auto; 也是居中。
因为，左右两侧的外边距都变成最大，也就
是往中间顶的这种感觉。

大厂面试中，经常问道的一个关于margin的问题！！非常重要！！
/* 注意！！对于块级元素
box1 box2之间的距离不是20+40=60 而是 40px
因为会有叠加取最大的那个作为外边距的距离！！
！！！！对于内联元素，是 60px*/

练习例子：很重要，注意看哦

<!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 {
            text-align: center;
            border: 1px solid #000;
            /* margin-top: 50px;
            margin-left: 20px;
            margin-right: 100px;
            margin-bottom: 10px; */
            
            /*margin: 10px 20px 30px 40px;中间是空格，不能用逗号分隔！！*/
            /* margin: 10px 20px 30px ; */
            /*margin: 50px auto;margin左右属性值设为autoa时，可以设置元素左右居中显示*/
            width: 200px;
            margin-left: auto;
            margin-right: auto;
            
        }
        /* 注意！！ 对于块级元素  margin
        box1  box2之间的距离不是20+40=60  而是 40px
        因为 会有叠加  取最大的那个作为外边距的距离！！
           ！！！！ 对于内联元素，是 60px指的是左右距离噢，，上下margin对于行内元		素不生效*/
        .box1 {
            border: 1px solid #000;
            margin: 20px;

        }
        .box2 {
            border: 1px solid #00ff00;
            margin: 40px; 
        }
    </style>
</head>
<body>
    <div class="box">基础课程</div>
    <div class="box1">div职业认证</div>
    <div class="box2">div微认证</div>
    <span class="box1">span职业认证</span>
    <span class="box2">span微认证</span>
</body>
</html>