首页 > 编程学习 > 解决方案——padding影响框的大小怎么办

解决方案——padding影响框的大小怎么办

发布时间:2022/8/25 16:22:26

方法:

再输入一行box-sizing:border-box;

解释:

1、没有设置box-sizing:border-box属性,宽高会加上padding和border的值,需要我们手动去计算,减去padding和border的值,并调整content的值,以免超过给定的宽高

比如下图,我给父元素parent设置宽高为500px,背景色为黑色;然后给子元素设置宽高为478px,并设置内边距10px,红色边框1px,背景颜色为灰色

此时子元素的宽高为500px(content 478px + padding 40px + border 4px)所以就覆盖了父元素的黑色背景,只能看到子元素的灰色背景

2、加了box-sizing:border-box属性,padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里

盒子模型会自动根据padding和border的值来调整content的值,就不需要手动调整

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号