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

【问题标题】：Unwanted "margin" between adjacent background-colored divs相邻背景色 div 之间不需要的“边距”
【发布时间】：2017-10-06 02:31:44
【问题描述】：

我正在尝试编写一个特殊的背景，以使自己在屏幕上居中。所以我使用了 div 和伪元素来做这件事，但是我的 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>

【问题讨论】：

标签： html css background margin

【解决方案1】：

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

【讨论】：

我会试试看，稍后回复你！
没有帮助 =/

【解决方案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，因为如果您想让它在所有设备上都具有响应性和完美性，您应该使用 @987654325 @ 而不是 px。我猜你正在学习或/和尝试新事物。

在使用 px 并且您的设计/页面未使用响应式设计（且未使用 meta:viewport）时查看此错误：

所以有空白，设计没有填满整个屏幕

【讨论】：

它有所帮助，但它让一切都没有对齐。我还有五行 .rec 和 .rec:after。

【解决方案3】：

*,*: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;
}

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

【讨论】：

它隐藏了我不需要的边距，但我没有解决。在更大的设备中隐藏它也无济于事。