问题描述
子元素宽度设置为100%时，给子元素添加padding不生效。
代码如下：
<style>
.father {
width: 200px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
text-align: right;
}
.son {
width: 100%;
padding-right: 10px;
}
</style>
<body>
<div class="father">
<div class="son">hello world</div>
</div>
</body>
原因分析
因为子元素的宽度为父元素宽度的100%，即200px，当给子元素设置
padding-right时，实际上是加在了这200px之外
如图：
解决方法
方法一
给子元素设置box-sizing:border-box;
方法二
去掉子元素上的width: 100%;
即可解决问题。
