padding-使用必记

前言

说起了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;
}
<!--
    作者：java-script@qq.com
    时间：2017-10-26
    描述：html代码
-->
<div class="padd">

</div>复制代码

效果图：
没有padding值时候。

padding暴走

二、 width非auto，padding影响尺寸

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

/**css代码*/
.padd{
    width: 30px;
    height: 30px;
    margin: 0 auto;
    padding: 10px;
    background-color: red;
}
<!--
    作者：java-script@qq.com
    时间：2017-10-26
    描述：html代码
-->
<div class="padd">

</div>复制代码

如图：
宽度为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;
}
<!--
    作者：java-script@qq.com
    时间：2017-10-26
    描述：html代码
-->
<div class="contents">
    <div class="body">
        小小坤--padding-使用必记
    </div>
</div>复制代码

如图：
没有设置padding值

设置padding值

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

总结

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