多方法解决设置width:100%再设置margin或padding溢出的问题

最新推荐文章于 2023-02-16 13:37:21 发布

weixin_34281537

最新推荐文章于 2023-02-16 13:37:21 发布

阅读量9.7k

点赞数 5

文章标签： python 移动开发 javascript ViewUI

原文链接：https://my.oschina.net/jack088/blog/3042690

版权

2019独角兽企业重金招聘Python工程师标准>>>

当设置了父元素的宽度，子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出。举个例子：

<!-- 示例 -->

<!-- html -->
<div class="parent">
    <div class="child"></div>
</div>

<!-- css -->
.parent {
    width: 500px;
    height: 50px;
    background-color: green;
    border: 1px solid #E74D4D;
}
.child {
    width: 100%;
    height: 30px;
    margin: 20px;
    background-color: pink;
}

示例

这是因为设置了width: 100%;后已经将父元素占满，再添加margin值就会溢出（默认溢出值为左侧的margin值）

解决方法：