首页 > 其他分享 >解决方案——padding影响框的大小怎么办

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

时间:2022-08-25 16:22:10浏览次数:67  
标签:box content 解决方案 元素 padding sizing 怎么办 border

方法:

再输入一行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的值,就不需要手动调整

标签:box,content,解决方案,元素,padding,sizing,怎么办,border
From: https://www.cnblogs.com/jiyue886/p/16624626.html

相关文章