可以使用CSS中的box-sizing属性来解决这个问题。box-sizing属性可以改变元素的盒模型,默认值为content-box。content-box会计算元素的padding和border在内,而background-color或background-image只会填充元素的content-box部分,所以会留下不必要的空间。可以使用box-sizing: border-box来告诉浏览器将padding和border计算在内,这样就可以用背景图像或颜色填充整个元素。
示例代码:
HTML:
CSS:
.box { width: 300px; height: 200px; padding: 20px; border: 10px solid black; background-color: yellow; box-sizing: border-box; }
上一篇:边框和内容之间不稳定的间隙
下一篇:边框会被裁剪为圆角吗?Swift