Question

CSS中添加什么属性，可以使padding不影响整体大小

Answer 1

首先，在能用Margin的情况下（比如不需要border的时候）尽量用Margin；

如果一定要用padding，请尽可能不给width和height设定一个固定值，可以设为百分比，也可以不设，取默认值（块级元素默认width为100%，height为0或为内容实际高度），这样的话元素的整体大小是不会改变的；

如果一定要给width和height指定固定值，可以把这个值减去padding的值，不过要注意的是，padding是分上下左右的，所以width要减去左右padding的和，height则要减去上下padding的和。

此外还要注意，元素的边框（border）也是要占用元素的实际宽度的，所以如果想让元素保持整体大小不变，也要把border考虑进去，方法跟padding差不多。

下面列出元素的实际尺寸构成，自己去研究一下就能明白道理：

元素的实际宽度=元素的width+左右padding+左右border

元素的实际高度=元素的height+上下padding+上下border

Answer 2

你可以尝试使用margin。数据大了padding就会溢出，如果一定要用padding你不妨先算大小

Answer 3

Vue实践-CSS样式position/display/float属性对比使用

Answer 4

-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;