给子盒子设置padding值是不会撑开父盒子的

最开始有如下一张图
在这里插入图片描述
大标题看起来离下边框太近了,所以想利用h4标签的padding-bottom将它们的距离调得远一些。现在就是有一个疑问,如果将h4的padding-bottom设置成10px,那大盒子会不会被撑大呢。测试结果如下所示:
没有设置padding时,父盒子和子盒子的大小如下:
在这里插入图片描述
在这里插入图片描述
给h4标签添加padding-bottom:10px;属性之后,显示结果如下:
在这里插入图片描述
在这里插入图片描述
可以看到父盒子的大小没有变化,只有子盒子被padding值撑开了。
所以在建立页面时,可以放心地利用padding-bottom属性调节子盒子里内容和盒子下边框之间的距离。因为只有设置了padding值的盒子大小才会受影响,外面的盒子不会受到影响。

猜你喜欢

转载自blog.csdn.net/qq_37621289/article/details/82840458