CSS之行内元素设置padding和margin是否有效

转载至：https://blog.****.net/qq_37621289/article/details/82859024

显示见下：

原图的尺寸是600*150，可以看到设置了内边距之后，图片的尺寸变大了，而且对其他元素产生了影响，所以img盒子被撑开了，内边距的设置是有效果的。
下面验证外边距：

显示如下：

能够看到外边距的设置也是有效的。

        </div>

块级元素的padding和margin值的设置都是有效的。行内元素和块级元素一样，都是盒子模型。但是今天做网页时发现给span设置margin-top值并没有效果，所以就想检测一下行内元素的padding和margin值的设置是否有效。代码运行结果如下：



可以看出margin-top和margin-bottom并没有起作用。下面看左右内边距：





可以看到行内元素的margin-left和margin-right是有效的。

对于padding值编写代码：



显示结果见下面的图：







可以看到padding-left和padding-right的设置是有效的。padding-bottom看起来好像有效，但是仔细观察就会发现它并没有撑开盒子。下面是从网上找到的解释：



下面开始验证padding-top和bottom对布局的影响，对span标签设置了相等的上下内边距，代码如下图



显示结果如下：



padding在垂直方向上似乎是有效的，但是设置的上下内边距是相等的，如果padding-top和bottom真的有效，那么字体就应该垂直居中，但是并没有。所以行内元素竖直方向上的内边距是无效的。

下面是一网友的总结，感觉很精辟：



下面验证padding-top和padding-bottom对其他元素是没有影响的。代码如下：



结果如下：



上下内边距在显示效果上是增加了，但是并没有挤走其他的元素，盒子实际上并没有被撑开。

要特别注意img是一个特例，它虽然是行内元素，但也是置换元素，所以它的性质不同于行内元素。对于img设置padding和margin都是有效的。

下面是设置了内边距的img，编码见下