如何刪除嵌入塊生成的額外空白空間？

Question

我使用這個CSS來格式化兩列，但我仍然有兩個之間的空間。我可以通過使用margin-left: -4px;或其他方法來消除它。有沒有更好的方法來做到這一點，或者是否有錯誤的CSS代碼？

div.col1{ 
    display: inline-block; 
    min-height: 900px; 
    height: 100%; 
    width 300px; 
    margin: 0px; 
    background-color: #272727; 
    overflow: hidden; 
    border: 1px dotted red; 
} 

div.col2{ 
    display: inline-block; 
    min-height: 900px; 
    height: 100%; 

    width: 620px; 
    margin: 0px; 

    vertical-align: top; 
    border: 1px dotted red; 
    overflow: hidden; 
} 

Answer 1

也許你有：

<div class="col1"> 
    Stuff 1 
</div> 
<div class="col2"> 
    Stuff 2 
</div> 

？如果是這樣的話，這可能是一個空白問題（它表明空白在html中很重要）。這應該修復它：

<div class="col1"> 
    Stuff 1 
</div><div class="col2"> 
    Stuff 2 
</div> 

Answer 2

你也應該註明：

padding: 0; 

Answer 3

apply float：left並且將刪除空間，因此文本不必在1行上。

Answer 4

另外，要解決此問題而不更改源代碼的格式，可以創建一個附加元素。

如果你在一個列表這樣它看起來像：

<ul > 
    <li> 
     <a href="#">Solutions Overview</a> 
    </li>  
</ul> 


<style type="text/css">    
    ul {word-spacing:-1em;} 
    ul li a{word-spacing:0;} 
</style> 

Answer 5

此外，一些有用的技術，可以發現這裏列出：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 6

與屬性inline-block將元素表現爲好像它們是內聯的（因此是名稱），因此遇到的任何空白都將被視爲空間。例如：

<div></div><div></div> 

將受到不同的呈現給

<div></div> 
<div></div> 

See a live example here

可以按如下方式解決使用HTML這個問題：

要麼把你的所有元素同一行，即

<div> 
    // CONTENT 
</div><div> 
    // CONTENT 
</div><div> 
    // CONTENT 
</div> 

或使用HTML註釋把空格去掉

<div> 
    //CONTENT 
</div><!-- 
--><div> 
    //CONTENT 
</div> 

可以按如下方式解決使用CSS這個問題：

設置屬性font-size: 0父，即

parent { 
    display: inline-block; 
    font-size: 0 
} 
parent * { 
    font-size: 12px 
} 

或在父級上設置屬性zoom: 1，即

parent { 
    display: inline-block; 
    zoom: 1 
} 

Answer 7

一個簡單的font-size:0到父元素將工作。

Answer 8

使父元素font-size: 0也將解決此問題。

<div class="col-set"> 
    <div class="col1"> 
     Stuff 1 
    </div> 
    <div class="col2"> 
     Stuff 2 
    </div> 
</div> 

.col-set { font-size: 0; }  
.col-set > div { font-size: 12px; }