html - 为什么添加填充会导致其扩展

Question

我正在尝试通过以下方式向框添加填充：

.p-box-header{
  border: 1px solid orange;
  float: left;
  width: $p-box-width;
  padding: 0px 0px 0xp 20px;
}

它看起来像这样：

“食物”标头的宽度增加了 20 像素。这在下面的框中没有发生。为什么会发生这种情况，我该如何预防？

谢谢

Answer 1

注意：您写的是“0xp”而不是“0px”。如果这不能解决您的问题，请阅读以下内容。

您应该看一下名为box-sizing的 CSS3 属性。

这会强制浏览器以指定的宽度和高度呈现框，并将边框和填充放在框内。

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

更多信息在这里：http ://css-tricks.com/box-sizing/它从 IE8 开始可用（CanIUse - Box-sizing）