本次测试主要在同一种盒子中,分别使用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测试行内元素与块级元素:
<!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属性,只对左右方向有效,块级元素无限制。