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

块级元素的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,编码见下
在这里插入图片描述

显示见下:
在这里插入图片描述
原图的尺寸是600*150,可以看到设置了内边距之后,图片的尺寸变大了,而且对其他元素产生了影响,所以img盒子被撑开了,内边距的设置是有效果的。
下面验证外边距:
在这里插入图片描述
显示如下:
在这里插入图片描述
能够看到外边距的设置也是有效的。

猜你喜欢

转载自blog.csdn.net/qq_37621289/article/details/82859024
今日推荐