🎊 css中设置padding无效的问题

问题描述

子元素宽度设置为100%时，给子元素添加padding不生效。

代码如下：

原因分析

因为子元素的宽度为父元素宽度的100%，即200px，当给子元素设置

padding-right时，实际上是加在了这200px之外

如图：

解决方法

方法一

给子元素设置box-sizing:border-box;

方法二

去掉子元素上的width: 100%;

即可解决问题。