padding和margin对块级元素的影响（分有width和无width两种情况）

padding和margin是CSS盒子模型的两个重要的属性，其主要作用是为了调节盒子的内边距和外边距。然而，当这两个属性作用与块级元素时，产生的效果要视情况而定：有width和无width。

首先需要了解盒子模型的基本结构：

外边距margin、边框border、内边距padding、内容content

情况一：盒子被设置了width：

 我们自己定义好的width和height，其实是content的大小，如上图所示：width: 400px; height: 400px。而当我们定义好大小之后，再使用padding和margin则会在原来的基础上撑大和移动盒子。

例如：一个400*400像素大小的红盒子和嵌套一个400*200像素的蓝盒子（width和height已自行设置）

 当使用使用给蓝盒子设置padding-left: 100px（左图）;或者设置：margin-left: 100px;（右图）之后：

 

 

padding：蓝盒子被撑大了，因为我们定义了蓝盒子的width和height值，所以content的大小被定死了，padding自然会撑大盒子。

margin：盒子直接向右移，content没有变化，同样是因为content的大小是设置好的。

情况二：盒子没有设置width：

如果没有设置盒子的width，则盒子的宽默认是与父盒子的宽一致（前提是块级元素）

如果没有设置盒子的height，则盒子的高默认是内容的高度。

在这种情况下，给盒子设置padding-left: 100px;或margin-left: 100px;的效果分别如下：

padding ：总盒子总范围不变，设置padding后content被压缩

margin：总盒子总范围不变，设置margin后（content+padding）被压缩。

由此可见，盒子不设置width的情况下，设置padding和margin，会在保持盒子总范围不变的情况下，压缩content或content+padding的大小。

最后总结：设置了width，content大小固定，不设置width，盒子的范围固定。

//笔者能力有限，如有擦错欢迎纠正，感谢阅读