css重点2：padding margin的使用

小黄呀呀呀

于 2020-04-27 15:45:17 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/qq_42129553/article/details/105764615

css 专栏收录该内容

41 篇文章 ¥19.90 ¥99.00

订阅专栏

本文介绍了CSS中padding和margin的使用，通过实例展示了如何利用padding和margin创建间距效果。同时，文章提到了padding可能导致盒子尺寸变化的问题以及解决方法，并解释了为何在同一标签上设置不同属性时，后面属性可能无效的原因，涉及到CSS的权重概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、padding和margin
在这里插入图片描述
以上图为例（实现上述图的2种方式，分别以padding 和margin来实现）：
思路：
（1）如果想要padding实现，首先要知道padding的意思，Padding是内边距的意思，也就是内容物距离我这个盒子的距离，里面的内容物是G，所以设置R的内边距是20px;
（2）如果想要margin实现，首先要知道margin的意思，margin是外边距的意思，也就是我这个东西距离别的东西的边框的距离，和padding的含义一样，只是看的角度不一样。

对于G而言，R是外部的东西，所以用margin。对于R而言，G是内部的东西，所以用padding。 不过用padding时要注意，padding的值发生变化，会导致整个盒子撑大，为了解决该问题：
（1）改变宽度来达到平衡
（2）如果是padding-left或padding-right，则不设置width
如果是padding-top或padding-bottom，则不设置height
（当对应的width height没有设置时，对应的padding不会撑爆盒子）

红色边框的盒子R里包含一个绿色边框的盒子G，G是R的内容物