padding与margin的对比测试

最新推荐文章于 2023-07-19 22:52:53 发布

iuukai

最新推荐文章于 2023-07-19 22:52:53 发布

阅读量769

点赞数

分类专栏： CSS # css属性对比测试

本文链接：https://blog.csdn.net/weixin_45389633/article/details/103842514

版权

CSS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css属性对比测试

2 篇文章 0 订阅

订阅专栏

本次测试主要在同一种盒子中，分别使用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>

总结：

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

iuukai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
padding与margin的对比测试

本次测试主要在同一种盒子中，分别使用padding和margin来测试两者的区别上面部分是通过添加背景色来观察区别，下面部分是不添加背景颜色，直接通过文本内容观察区别第一步：分别加入padding与margin（两个大盒子只是一个背景父元素，不做padding或margin操作）在box2与test1里加入padding，在box4与test2里加入margin，为了对比，取同值：paddi...
复制链接

扫一扫