为什么添加填充导致这种扩展

Question

我试图通过以下方式将填充添加到框中：

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

它看起来像这样：

'Food'标题的宽度增加了20px。这不会发生在下面的框中。为什么会发生这种情况？我该如何预防？

THX

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）

以来可用