相鄰的背景色divs之間的不需要的「邊距」

我想編碼一個特殊的背景，以保持自己居中在屏幕上。所以我使用div和僞元素來做到這一點，但是我一直在我的div和它們的僞元素之間，特別是在小屏幕設備中出現不希望的「邊緣」。從我的手機相鄰的背景色divs之間的不需要的「邊距」

屏幕截圖展示了一些白色不需要利潤率

如何防止這種「利潤」任何想法？

非常感謝！

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

來源

2017-10-05 Genos

嘗試構建過程中涅槃您的HTML以及。如果我們在HTML中進行縮進，某些瀏覽器在渲染時會在它們之間添加細線空間。

來源

2017-10-05 18:05:05 Tapas

我會嘗試了這一點，拿回來你以後！ – Genos

它沒有幫助=/ – Genos

添加一些填充到 .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，當你的設計/網頁沒有使用響應式設計的這個錯誤（而不是使用元：視）：

因此，有白色的空間和設計，不能填滿整個屏幕

來源

2017-10-05 18:17:50 pharesdiego

它的幫助，但它沒有對齊。我還有五行.rec和.rec：之後。 – Genos

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

來源

2017-10-05 18:25:10

它隱藏我不受歡迎的保證金，但我沒有解決。隱藏它也無助於更大的設備。 – Genos

相鄰的背景色divs之間的不需要的「邊距」

回答

相關問題