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

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

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属性
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

穿条秋裤到处跑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值