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

Question

我想编码一个特殊的背景，以保持自己居中在屏幕上。所以我使用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>

Answer 1

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

Answer 2

添加一些填充到 .rec2：之后，.rec3：后

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

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

查找使用时PX，当你的设计/网页没有使用响应式设计的这个错误（而不是使用元：视）：

因此，有白色的空间和设计，不能填满整个屏幕

Answer 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>