内联块元素之间的空格

Question

默认情况下，内联块元素是否有空格？我认为margin-left和margin-bottom都设置为-4px（在Chrome上，margin-bottom为-5px）。他们为什么要这样做？我的意思是因为这一点，在为所有这些margin-top元素（每个都是25％）的容器设置inline-block时，第三个元素将在下一行结束。为什么会这样？

Answer 1

只需注释元素之间的空格和换行符，以避免不必要的边距：

<div class="inline-block-element></div><!--

--><div class="inline-block-element></div>

Answer 2

以下是避免空间的两种常用方法：

1. 您可以向上移动标记以避免元素之间的换行符：

<ul>
    <li>
    one</li><li>
    two</li><li>
    three</li>
</ul>

1. 或者你可以注释掉线：

<ul>
    <li>one</li><!--
    --><li>two</li><!--
    --><li>three</li>
</ul>

<小时/> 你得到的空间是因为 元素之间有一些空格（制表符和换行符算作“空格”）。通过摆脱元素之间的空间，你将解决问题。 ：）