解决方法
山姆,你看到的那个空间实际上就是空白.这就是为什么删除填充和边距什么都不做.让我解释.当你有这个:
<div> a a a a </div>
这就是它呈现的方式:
a a a a
…对?
所以,如果你有这个:
<div> <div style="display:inline-block"></div> <div style="display:inline-block"></div> <div style="display:inline-block"></div> </div>
……你会得到同样的东西:
block [space] block [space] block
现在……这个问题有很多不同的解决方案.我相信最常见的是评论html中的空格:
<div> <div style="display:inline-block"></div><!-- --><div style="display:inline-block"></div><!-- --><div style="display:inline-block"></div> </div>
我不喜欢它 – 我更喜欢保持html尽可能干净.我首选的方法是将父级的font-size设置为0,然后在内联块本身上设置所需的字体大小.像这样:
div { font-size: 0; /* removes the whitespace */ } div div { display: inline-block; font-size: 14px; }