相邻背景色div之间不需要的“边距”

Question

我正在尝试编写一个让自己在屏幕上居中的特殊背景。所以我使用了div和pseudo元素来做到这一点，但是我的div和它们的伪元素之间仍然存在一个不受欢迎的“边缘”，特别是在小屏幕设备中。

我的手机屏幕截图显示了一些白色不良边距

关于如何防止这种'边缘'的任何想法？

非常感谢！

*,*:after,*:before,body{margin:0;padding:0;border:0}
.row{width:100%;display:inline-flex}
.cont1920{width:100%;max-width:1920px;float:left;margin:auto;background:#8dbb70;position:relative;overflow:hidden}
.artw{width:1920px;position:absolute;left:50%;margin-left:-960px}
.h23{height:910.77px}

.rec2,.rec3{position:relative;background:#3F7F7D;content:''}
.rec2{width:631.10px;height:441.33px}
.rec3{width:631.10px;height:469.44px}

.rec2:after,.rec3:after{width:0;height:0;border:0;content:'';position:absolute}
.rec2:after{
right:-167.26px;
border-left:167.26px solid #3F7F7D;
border-bottom:441.33px solid transparent;
}
.rec3:after{
right:-396.37px;
border-left:396.37px solid #3F7F7D;
border-top:469.44px solid transparent;
}

<div class='row'>
  <div class='cont1920 h23'>
    <div class='artw'>
      <div class='rec2'></div>
      <div class='rec3'></div>
    </div>
  </div>
</div>

Answer 1

在构建期间尝试缩小html。如果我们在HTML中进行缩进，某些浏览器会在渲染时在它们之间添加细线空间。

Answer 2

添加一些填充 .rec2：after，.rec3：after

.rec2:after,.rec3:after{
   padding: 2px;
   width:0;
   height:0;
   border:0;
   content:'';
   position:absolute;
}

顺便说一句，我不建议像你在css代码中那样使用宽度和高度，例如：width:631.10px; height:469.44px，因为如果你想让它在所有设备中都具有响应性和完美性，你应该使用%代替px。我想你正在学习或/并尝试新的东西。

使用px时以及当您的设计/页面未使用响应式设计（并且不使用meta：viewport）时，请查看此错误：

所以有空白区域并且设计没有填满整个屏幕

Answer 3

＆＃13;

＆＃13;

*,*:after,*:before,body{margin:0;padding:0;border:0}
.row{width:100%;display:inline-flex}
.cont1920{width:100%;max-width:1920px;float:left;margin:auto;background:#8dbb70;position:relative;overflow:hidden}
.artw{width:1920px;position:absolute;left:40%;margin-left:-960px}
.h23{height:910.77px}

.rec2,.rec3{position:relative;background:#3F7F7D;content:''}
.rec2{width:631.10px;height:441.33px}
.rec3{width:631.10px;height:469.44px}

.rec2:after,.rec3:after{width:0;height:0;border:0;content:'';position:absolute}
.rec2:after{
right:-167.26px;
border-left:167.26px solid #3F7F7D;
border-bottom:441.33px solid transparent;
}
.rec3:after{
right:-396.37px;
border-left:396.37px solid #3F7F7D;
border-top:469.44px solid transparent;
}

＆＃13;

<div class='row'>
  <div class='cont1920 h23'>
    <div class='artw'>
      <div class='rec2'></div>
      <div class='rec3'></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;