图解CSS中padding、margin、border的区别及使用

本文链接： https://blog.csdn.net/qq_41885819/article/details/98971591

首先从概念和属性的角度对三者有个初步认识

padding 设置或返回元素的内边距。

该属性可使用 1 到 4 种值：
如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。
如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。
如果规定三种值，比如：div {padding: 50px 10px 20px} - 上内边距是 50px，左内边距和右内边距是 10px，下内边距是 20px。
如果规定四种值，比如：div {padding: 50px 10px 20px 30px} - 上内边距是 50px，右内边距是 10px，下内边距是 20px，左内边距是 30px。

border 设置或返回元素的边框属性。

border-width 设置边框宽度
border-style 设置边框样式
border-color 设值边框颜色

margin 设置或返回元素的外边距。

该属性可使用 1 到 4 种值：
如果规定一种值，比如：div {margin: 50px} - 所有四个外边距都是 50px。
如果规定两种值，比如：div {margin: 50px 10px} - 上外边距和下外边距是 50px，左外边距和右外边距是 10px。
如果规定三种值，比如：div {margin: 50px 10px 20px}- 上外边距是 50px，左外边距和右外边距是 10px，下外边距是 20px。
如果规定四种值，比如：div {margin: 50px 10px 20px 30px} - 上外边距是 50px，右外边距是 10px，下外边距是 20px，左外边距是 30px。

通过盒子模型图来直观感受一下三者区别
在这里插入图片描述
代码及效果实例

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box</title>
        <style>
                body{
                  /*背景为黑色*/
                  background: #000;                  
                }
                .div1{
                    width: 150px;
                    height: 150px;
                    /*div背景为图中蓝色*/
                    background: #388ecb;
                    /*border为图中的卡其色*/
                    border: 20px solid burlywood;
                    /*外边距30px*/
                    margin: 30px;
                    /*内边距30px*/
                    padding: 30px;
                }
              </style>
            </head>           
              <div class="div1">first div</div>
              <div class="div1">second div</div>
            </body>
</html>

下面是网页效果截图，可以看到，文字“first div”并没有在蓝色背景块的最上角，这个就是内边距的效果；蓝色和黑色之间的卡其色区域，为div的border边框效果；两个div质检有一定的距离，这个距离不是30+30=60px，而存在一定的外边距重叠，只有30px。
在这里插入图片描述
下面是去掉外边距和内边距的效果图，可以发现，内边距不影响div实际的宽和高，及width和height属性

图解CSS中padding、margin、border的区别及使用

猜你喜欢