可以使用box-sizing属性来解决这个问题。该属性有两个取值,分别是content-box和border-box。默认值是content-box,表示元素的宽度和高度只包括内容的宽度和高度,不包括padding和border。而border-box则表示元素的宽度和高度已经包括了padding和border,不需要再考虑它们的影响。
示例代码如下:
.container { width: 200px; height: 100px; padding-right: 20px; border-right: 10px solid #ccc; box-sizing: border-box; /* 解决问题的关键 */ }
在上述代码中,设置了元素的padding-right为20px,边框右侧为10px的实线边框,然后添加了box-sizing属性,并将其取值设置为border-box。这样就可以保证元素的宽度已经包括了padding和border,不会出现考虑不到padding的情况了。