CSS中margin和padding的区别

区别

margin对整个标签起作用，是外边距；而padding对标签的内容起作用，是内边距

下图中div2使用了margin和padding，margin是div2和div1的边距，padding是div2和div3的边距

使用

margin

语法结构	说明
`margin-left:10px`	左外边距
`margin-right:10px`	右外边距
`margin-top:10px`	上外边距
`margin-bottom:10px`	下外边距
`margin:10px`	四边统一外边距
`margin:10px 20px`	上下、左右外边距
`margin:10px 20px 30px`	上、左右、下外边距
`margin:10px 20px 30px 40px`	上、右、下、左外边距

padding

语法结构	说明
`padding-left:10px`	左内边距
`padding-right:10px`	右内边距
`padding-top:10px`	上内边距
`padding-bottom:10px`	下内边距
`padding:10px`	四边统一内边距
`padding:10px 20px`	上下、左右内边距
`padding:10px 20px 30px`	上、左右、下内边距
`padding:10px 20px 30px 40px`	上、右、下、左内边距

属性可能取的值

单位	说明
`length`	规定具体单位记的内边距长度
`%`	基于父元素的宽度的内边距的长度
`auto`	浏览器计算内边距
`inherit`	规定应该从父元素继承内边距

测试

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS中margin和padding的区别</title>
    <style>
        .boderOuter{
            border: 2px solid red;
            margin-left: 20%;
            margin-right: 20%;
        }
        .boderInter1{
            border: 2px dotted blue;
        }
        .boderInter2{
            border: 2px dotted blue;
            margin: 5px 0px 5px 5px;
            padding: 6px 0px 6px 6px;
        }
    </style>
</head>
<body>
    <div class="boderOuter">
        <div class="boderInter1">
            <span>111</span>
        </div>
    </div>
    <div class="boderOuter" style="margin-top: 20px;">
        <div class="boderInter2">
            <span>222</span>
        </div>
    </div>
</body>
</html>