1. padding值对block水平元素的影响
1.padding值暴走,一定会影响尺寸.
2.width非auto,padding 影响尺寸.
3.width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸.
2. padding值对内联元素的影响
2.1 水平padding影响尺寸.垂直padding不影响尺寸,但是会影响背景色.
2.2 设置padding的注意事项
2.2.1. padding不支持任何形式的负值.
2.2.2. padding百分比均是相对于宽度计算的
padding设置为50%可以实现div正方形
.father{width: 200px;height:300px; background-color: red;}
.box{margin-top: 10px; padding: 50%;background-color: yellow;}
<div class="father">
<div class="box"></div>
</div>
3. inline水平元素的padding百分比值
3.1. 同样相对于宽度计算
3.2. 默认的宽度和高度不一致
*{margin: 0; padding: 0}
.father{width: 350px; height: 400px; background-color: red;margin-top: 200px;}
span{padding: 50%; background-color: green;}
<div class="father">
<span></span>
</div>
3.3. padding会断行
*{margin: 0; padding: 0}
.father{width: 350px; height: 400px; background-color: red;margin-top: 200px;}
span{padding: 20%; background-color: green;}
<div class="father">
<span>大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍大家一起来玩耍</span>
</div>
