当子元素宽度设置为100%时，添加padding会导致实际宽度超出父元素。原因是padding加在了已设定的100%宽度之外。解决方法包括使用box-sizing:border-box属性或移除子元素的width:100%设置。
问题描述
子元素宽度设置为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%;
即可解决问题。
2817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
