关于margin-right和padding-right无效的原因

最新推荐文章于 2025-10-03 08:48:42 发布

原创最新推荐文章于 2025-10-03 08:48:42 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端同时被 3 个专栏收录

168 篇文章

订阅专栏

遇到的问题之后的解决方法

57 篇文章

订阅专栏

css

47 篇文章

订阅专栏

探讨CSS中width:100%与padding-right及margin-right的兼容性问题，介绍如何通过box-sizing:border-box或其他布局策略解决宽度溢出难题。

先说padding-right，当我们把width：100%；和padding-right放在一起的时候，会发现，出来的样子是这样的（为了看到效果，设置置了背景色），右padding无效，

这个时候只要加上box-sizing: border-box;就可以了，或者去掉 width: 100%;亦或者分开写成两个盒子，像这样也可以；

<div class="" style="width: 100%;">
	<div class="" style="padding: 20px;background-color: aqua;">ceshi</div>
</div>

再来说margin-right，margin和padding的写法差不多，不过box-sizing: border-box;对它是没有效果的，只能去掉width:100%;或者像上面一样写成两个嵌套的盒子。个人是比较喜欢分开写的，大部分时候，我们既然写了width：100%;肯定是因为需要它，所以我们应该想的是怎么解决这个问题，而不是简单粗暴的删掉它。