padding-使用必记

时间:2023-01-12 06:33:46

前言

说起了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-使用必记

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

padding-使用必记

三、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-使用必记

设置padding值

padding-使用必记

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

padding-使用必记

总结

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