我们在学习前端的时候,一定会遇到这样的问题:
当我们给盒子设置了宽度、高度以及背景颜色时,这个时候在给它添加
padding
和
margin
的属性值,会有什么不一样吗?
padding
margin
先简单通俗地介绍一下这两个属性:
padding
可以理解为内容与边框的距离;
margin
可以理解为边框与其他元素的距离。
最重要的是:这两者都会撑大我们的盒子!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: aqua;"></div>
</body>
</html>
下面是代码的渲染结果:
一个简简单单的200x200px的盒子!背景颜色完全填充进去,找不出一点问题!
但是当我们为这个盒子添加了
padding
属性时,结果会不会有什么变化呢?
div {
width: 200px;
height: 200px;
background-color: aqua;
padding-left: 100px;
}
渲染结果如下:
看到上图的结果,我们可以很容易的发现盒子的大小以及改变为了300x200px,宽度的增大就是受到了
padding-left
的影响,也证实了我们一开始说的
padding
属性可以撑大盒子,
并且这里的背景颜色也是顺利的填充了整个盒子!
下面我们来看一下
magin
对盒子产生的影响:
div {
width: 200px;
height: 200px;
background-color: aqua;
margin-left: 100px;
}
我们把原本的
padding-left
改为了
margin-left
,看看渲染结果会不会有什么不同:
没错,盒子总是善变的!盒子的宽度和高度依旧保持着200x200px,但是由于我们设置了
margin-left
值,所以会与父元素(浏览器)有着100px的间隔,所以也可以理解为撑大了盒子,不过此时的背景颜色并不会渲染到外边距,这是为什么呢?
我们可以看一看background-color的定义:
原来背景颜色并不填充外边距,这也是为什么加了
margin
之后,背景颜色的大小还是那么大!