padding与margin的对比测试

本次测试主要在同一种盒子中,分别使用padding和margin来测试两者的区别


上面部分是通过添加背景色来观察区别,下面部分是不添加背景颜色,直接通过文本内容观察区别

👉第一步:分别加入padding与margin(两个大盒子只是一个背景父元素,不做padding或margin操作)

(在box2与test1里加入padding,在box4与test2里加入margin,为了方便对比,两组盒子除了颜色和margin、padding不一样,基础宽高一样)

发现:
①除了盒子大小被填充了,但无论是padding还是margin,文本内容的位置都是一样变化的。
②只要该元素padding加了多少,相应减去同样面积,效果还是跟margin一样。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>平行盒子——margin与padding的区别</title> 
<style type="text/css">
    body{
        padding: 0px;
        margin-right: 0px;
    }
    		/*padding*/
    .box1{
        background-color: #CC99FF;
        width: 200px;
        height: 200px;
    }
    .box2{
        background-color: #33FFCC;
        width: 100px;
        height: 100px;
        padding: 20px;
    }
    .test1{
        background-color: #CC6699;
        padding: 20px;
    }
    		/*margin*/
    .box3{
        background-color: #CCFF00;
        width: 200px;
        height: 180px;
    }
    .box4{
        background-color: #009966;
        width: 100px;
        height: 100px;
        margin: 20px;
    }
    .test2{
        background-color: #CC66FF;

    }
</style>

</head> 
<body>
<div>
<div class="box1">盒子1
    <div class="box2">盒子2<span class="test1">test01</span></div>
</div>
<div class="box3">盒子3
    <div class="box4">盒子4<span class="test2">test02</span></div>
</div>
</div>



<p>1-1测试:分别在两个同样的内嵌盒子,使用padding和margin,进行对比</p>
<p>ps:两个属性只作用于最里面盒子和span标签</p>

</body>
</html>



👉第二步,增加文本内容测试

ps:只有纯中文文本才会转行,其他纯文本字符或字母都不会转行,除非加入样式:word-wrap:break-word; word-break:break-all;

传送门:html文件中纯数字或纯英文不会自动换行
发现:
①即使在父元素增加文本内容,其两者的改变均一样(都是针对实际内容文本,不针对填充);
②而至于padding的填充部分的效果:遮盖掉父元素,如果修剪到和原来一样大小,其实还是和margin没区别。
在这里插入图片描述

btw:
这里是span的padding和margin测试,在span里增加内容段后,因为其宽等于父元素,此时已经超出父元素的内容宽值,所以超出部分会自动转换,唯一的区别是,padding的超出部分会覆盖掉它的头步,还是上面的原因,padding填充部分,就是遮盖作用(没背景就没问题)。

在这里插入图片描述

在这里又在来个行内元素与块级元素的测试

👉知识点传送门:
①行内元素的padding和margin是否无效
②margin和padding的区别

padding测试行内元素与块级元素:
在这里插入图片描述
margin测试行内元素与块级元素:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 
<style type="text/css">
    body,p{
        padding: 0px;
        margin: 0px;
    }
    .box1{
        background-color: yellow;
        width: 100px;
        height: 25px;
    }
    .box2{
        background-color: pink;
        width: 100px;
        height: 25px;
    }
    .test1,.test2{
        
    }
</style>
</head> 
<body>
    <div class="box1"><span class="test1">我是span</span></div>
    <div class="box2"><p class="test2">我是p</p></div>
</body>
</html>



总结:
  1. 在取正值的情况下,只要padding用的好(padding加多少,相对宽高就减多少),能达到的效果和作用其实跟margin一样。
  2. padding填充部分就是面积,面积不能为负,所以它的值不能为负。margin只是位置方向,可以为负(相反方向移动同样距离)。
  3. 行内非替换元素上设置的内边距不会影响行高计算。因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。
  4. 行内元素无论是marigin属性还是padding属性,只对左右方向有效,块级元素无限制。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值