css之子容器宽度100%，设置margin后超出父容器

Posted 2022-02-03 铁锤妹妹@

2022年开年第一篇，很庆幸一直能学到新的东西，生命不息奋斗不止！
回顾这一年，从刚开始的学习定义变量到现在可以独立完成一个模块的功能，技术上确实长进不少，也深深地感受到你知道的越多，你不知道的越多；
希望在新的一年里技术更上一个台阶，工资越来越多，嘻嘻(#^.#)
话不多说，开干吧~

一. 问题

我们发现，需要设置一定边距时，如果子容器设置宽度为100%，然后设置了margin，会超出父容器的宽度溢出。

  .renderList 
    width: 100%;
    background: #fff;
    .renderItem 
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 29upx;
      border-bottom: 1upx solid #e0e0e0;
    
  

二. 解决

想要实现的效果其实是这样的

思路：

1）先给父容器设置 左右padding: 0 29upx; 每个item的下划线就会离左右两边有一段距离，是我想要的效果
2）再给子容器item设置 上下padding: 29upx 0; 盒子上下有个距离更美观

 .renderList 
    width: 100%;
    height: auto;
    background: #fff;
    padding: 0 29upx;
    box-sizing: border-box;
    .renderItem 
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 29upx 0;
      border-bottom: 1upx solid #e0e0e0;
    
  

这个问题经常会遇到，这次在这做个总结吧；这是我个人的一种解决方案，还会有其他更好的方案，欢迎补充指正，一起探讨学习~