1.问题
初始效果如图1,现想要图标和文字距离左侧一段距离,故设置
padding-left: 25%
![](https://i-blog.csdnimg.cn/blog_migrate/df86cf82ce7edf7723be0ff1fabe3e6a.png)
设置后效果如图2,可见未达到预期效果
![](https://i-blog.csdnimg.cn/blog_migrate/66a763f50ae9b18315572a2dcbc2c444.png)
2.解决
显然盒子被撑大了,此时给盒子添加一个属性
box-sizing: border-box
效果如图3所示,问题解决
![](https://i-blog.csdnimg.cn/blog_migrate/e64cad21d9e5a694669948a425414dc8.png)
3.心得
给盒子添加padding属性时,最好同时设置一个
box-sizing: border-box
以防止盒子被撑大或者引起其他不必要的麻烦
初始效果如图1,现想要图标和文字距离左侧一段距离,故设置
padding-left: 25%
设置后效果如图2,可见未达到预期效果
显然盒子被撑大了,此时给盒子添加一个属性
box-sizing: border-box
效果如图3所示,问题解决
给盒子添加padding属性时,最好同时设置一个
box-sizing: border-box
以防止盒子被撑大或者引起其他不必要的麻烦