"marge" non désirée entre les divs de couleur de fond adjacentes

Question

J'essaye de coder un arrière-plan spécial qui se maintient centré sur l'écran. J'ai donc utilisé des éléments div et pseudo pour le faire, mais je continue d'obtenir une "marge" indésirable entre mes divs et leurs pseudo-éléments, en particulier dans les dispositifs à petit écran.

Capture d'écran de mon téléphone montrant des marges blanches indésirables

Toute idée sur la façon d'éviter cette « marge »?

Merci beaucoup!

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

Essayez minifying votre code html et pendant la construction. Si nous faisons de l'indentation en HTML, certains navigateurs ajoutent de l'espace entre les deux lors du rendu.

Answer 2

Ajouter à un certain rembourrage .rec2: après, .rec3: après

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

D'ailleurs, je ne vous recommande pas l'utilisation comme la largeur et la hauteur vous faites dans votre code CSS, par exemple : width:631.10px; height:469.44px, parce que si vous voulez le rendre réactif et parfait dans tous les appareils, vous devez utiliser % au lieu de px. Je suppose que vous apprenez ou/et essayez quelque chose de nouveau. Regardez

cette erreur lors de l'utilisation px et lorsque votre conception/page est de ne pas utiliser le design réactif (et ne pas utiliser meta: viewport):

Donc, il y a un espace blanc et la conception ne remplir tout l'écran

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>