How do I remove extra margin space generated by inline blocks?

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

Perhaps you have:

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

? If so then this is probably a whitespace problem (it turns out whitespace does matter in html). This should fix it:

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

---

一个简单的font-size:0到父元素将工作。

---

The elements with attribute inline-block will behave as if they are inline (hence the name), and therefore any whitespace encountered will be treated as a space. For example:

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

will be rendered differently to

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

See a live example here

You can solve this problem using HTML as follows:

Either place all your elements on the same line, ie

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

or use HTML comments to remove the spaces

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

You can solve this problem using CSS as follows:

Set the attribute font-size: 0 on the parent, ie

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

or set the attribute zoom: 1 on the parent, ie

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

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

上一篇: 我如何消除CSS中内联元素之间的间距？

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