前言

说起了padding可谓是盒子模型中最常用的一个属性，你真的了解padding吗？那我请问您设置padding会影响盒子的宽度与高度吗？也许好多人会回答padding会影响到盒子的宽度与高度。在我看来，padding是不会影响盒子宽度与高度，padding会影响盒子宽度与高度的。前提是：

1、padding值暴走，一定会影响尺寸2、width非auto，padding影响尺寸3、width为auto 或者box-sizing为border-box，同时padding没有暴走，不影响尺寸                                            ------来源于--张鑫旭笔记-----复制代码

一、padding值暴走，一定会影响尺寸

接下来我们来看一看

/**css代码*/.padd{    width: 30px;    height: 30px;    margin: 0 auto;    padding: 60px;    background-color: red;}
    
    
复制代码

效果图：

没有padding值时候。

padding暴走

二、 width非auto，padding影响尺寸

定宽度的div，width不是auto则padding影响尺寸。

/**css代码*/.padd{    width: 30px;    height: 30px;    margin: 0 auto;    padding: 10px;    background-color: red;}
    
    
复制代码

如图：

宽度为30px高度为30px,padding为10实际尺寸则为50px*50px

三、width为auto 或者box-sizing为border-box，同时padding没有暴走，不影响尺寸

先看看width为auto的时候。

/**css代码*/html,body{    padding: 0;    margin: 0;}.contents{    margin: 0 auto;    width: 400px;    height: 300px;    background-color: #4B546C;}.body{    padding: 100px;    height: 300px;    background-color: #717FA5;}
    
    
    
     
              小小坤--padding-使用必记    
     
    
复制代码

如图：

没有设置padding值

设置padding值

如果div父元素没有设置宽度高度，div设置padding值，width：auto，则不会影响尺寸。如果div父元素设置固定宽度高度，div设置padding则，父元素会受到高度影响。由于div没有设置宽度高度，它的宽度与父元素是相同的，高度也如此。 设置div的css box-sizing为border-box,是不会影响实际尺寸。如图

总结

通过上边的案例得到 padding值影响尺寸的前提是，宽度，与padding暴走与box-sizing为border-box三要素。只要记住了上边三要素。麻麻再也不要担心padding值引起宽度改变啦！！！