如何删除由内联块生成的额外边距空间?[副本]

也许你有:

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

简单的 font-size:0 对父元素有效。

具有属性的元素 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
}

或者,要在不更改源代码格式的情况下修复此问题,可以创建一个附加元素。

如果您在列表中执行此操作,它将看起来像:

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


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

此外,以下列出了一些有用的技术:

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

应用浮动:左边,这将删除空格,这样文本就不必在一行上。

生成父元素 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; }

您还应该指定:

padding: 0;