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

2018-07-02 00:28:08

这个问题在这里已经有了答案：

如何去除内嵌块元素之间的空间？ 32个答案

也许你有：

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

在这里看到一个实例

您可以使用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
}

链接地址: http://www.djcxy.com/p/89263.html