[分享]css中div边框线在跑

最近我遇到了一个奇怪的问题：我的CSS中div边框线居然在跑！div { border: 1px solid black; } 我本以为这是常见的CSS边框样式，但是实际上我的页面上出现了这张图： 边...

最近我遇到了一个奇怪的问题：我的CSS中div边框线居然在跑！

div {
  border: 1px solid black;
} 

我本以为这是常见的CSS边框样式，但是实际上我的页面上出现了这张图：

一开始我以为可能是padding的问题，于是我将其改为0，但是边框线依然在跑。

div {
  border: 1px solid black;
  padding: 0;
} 

于是我开始尝试修改其他样式，终于发现问题出在了box-sizing属性上。我在之前设置了box-sizing为border-box，因此边框线被计算在了元素的内部。

div {
  border: 1px solid black;
  padding: 5px;
  box-sizing: content-box;
} 

最终，我使用了box-sizing属性将其改回content-box，问题终于解决了。当然，如果您的设计需要使用border-box，也可以通过修改元素的宽度和高度来解决边框线跑的问题。