为什么填充属性会使元素变大？

Question

我有一个字母div：

HTML

<div>A</div>

CSS

div {
  border: 1px solid black;
  background-color: #CC0000;
  width: 150px;
  height: 150px;
  margin: 10px 5px 5px 50px;
  padding: 0px 30px 0px 10px /* I want to move my letter with it */
}

由于填充属性，字母移动，但它也使方块更大。 为什么填充将方块转换为矩形？

JSF：http://jsfiddle.net/fnBaD/1

Answer 1

标准盒型号＆＃39;不包括填充/边框到宽度/高度计算

通过添加box-sizing:border-box属性，它将强制浏览器包含维度中的填充/边框

它常见于通用选择器

* {
box-sizing:border-box;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 2

填充被认为是应用它的元素的一部分。这就是元素变大的原因。

Answer 3

填充总是应用于＆＃39;元素。因此，

padding:5px;

有效地在所有四个方面添加5px＆＃39;一个元素。

因此，padding属性会使元素变大。