divs之間的空白區域，即使邊距和填充設置爲0

-1

我正在嘗試爲我的個人使用構建一個css框架。
我以前在其他項目上遇到過這個問題，但是設法通過修改代碼來修復它。我不知道爲什麼會這樣divs之間的空白區域，即使邊距和填充設置爲0

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
*{ 
 
    box-sizing:border-box; 
 
} 
 

 
.row{ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.col-sm-1,.col-md-1,.col-lg-1{ 
 
    margin:0; 
 
    padding:0; 
 
    display:inline-block; 
 
    width:4.16667%; 
 
    border:1px solid black; 
 
}

<div class="row"> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
    </div>

，你可以在代碼中看到片斷有當您運行因此造成該行中較小的div空白。我試着用鉻檢查它，但空白空間顯示爲身體的一部分。我幾乎沒有邊距，也沒有填充

來源

2017-02-24 red security

這並不內嵌塊上只發生 –

的解決方案是一樣的，不管它是否是'直列block'或別的東西。 – Xufox

問題是內嵌塊之間的空白。

<div style="display:inline-block">A</div> <!-- There is a white-space here --><div style="display:inline-block">B</div>

您可以通過包裝的div一起無縫（雖然醜陋）避免這種情況：

<div style="display:inline-block"></div 
><div style="display:inline-block></div>

這消除了實際上做你解析標記之間的空間！

的另一種方法來避免，這是代替

display:inline-block

使用

float:left

，然而，需要

clear:both

在端

來源

2017-02-24 23:46:57 Psi

float：left修復它，但爲什麼我要清除：兩者？這只是把他們放在新的路線上。我不想那樣，無論如何謝謝:) –

畢竟浮動內容你應該設置一個明確的元素：兩者，否則下面的內容可能會放置在某處... – Psi

查nged顯示：block and float：left;並且工作正常。

html,body{ 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
*{ 
 
    box-sizing:border-box; 
 
} 
 

 
.row{ 
 
    display:block; 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.col-sm-1,.col-md-1,.col-lg-1{ 
 
    margin:0; 
 
    padding:0; 
 
    display:block; 
 
    float:left; 
 
    width:4.16667%; 
 
    border:1px solid black; 
 
}

<div class="row"> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
     <div class="col-sm-1"> 
 
     </div> 
 
    </div>

來源

2017-02-24 23:47:25 zJorge

divs之間的空白區域，即使邊距和填充設置爲0

回答

相關問題