如何删除嵌入块生成的额外空白空间？

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; }