隣接する背景色のdivの間の不要な "マージン"

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>