要解决这个问题,一种方法是使用CSS的盒模型属性box-sizing,并将其值设置为border-box。这样,元素的宽度就包括了内边距和边框。如下所示:
.element { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid #000; }
然而,如果大家的代码中已经存在许多元素并且它们的内边距和边框都没有生效,大家不想对每一个元素逐一设置box-sizing属性。这时,大家可以使用通配符选择器来批量修改所有元素的box-sizing属性:
* { box-sizing: border-box; }
这样就能够确保所有元素的内边距和边框都会被正确地显示了。