盒子使用margin或padding后与背景颜色的联系：

最新推荐文章于 2023-01-09 17:18:42 发布

Running53

最新推荐文章于 2023-01-09 17:18:42 发布

阅读量5.9k

点赞数 2

分类专栏：前端 CSS HTML标签

本文链接：https://blog.csdn.net/weixin_54681929/article/details/116275884

版权

前端同时被 3 个专栏收录

19 篇文章 1 订阅

订阅专栏

HTML标签

15 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

我们在学习前端的时候，一定会遇到这样的问题：

当我们给盒子设置了宽度、高度以及背景颜色时，这个时候在给它添加`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之后，背景颜色的大小还是那么大！

Running53

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子使用margin或padding后与背景颜色的联系：

我们在学习前端的时候，一定会遇到这样的问题：当我们给盒子设置了宽度、高度以及背景颜色时，这个时候在给它添加padding和margin的属性值，会有什么不一样吗？先简单通俗地介绍一下这两个属性：padding可以理解为内容与边框的距离；margin 可以理解为边框与其他元素的距离。最重要的是：这两者都会撑大我们的盒子！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫