使用text-align时div之间的空格

Question

我使用text-align：center来定位三个div。但是每个div之间都有一个小的差距。为什么会这样？图片在下面给出？ div显示为内联块。

Answer 1

内联块元素通常在它们之间有空格，因为HTML在代码中将空行显示为空格字符。

例如，每个div之间都有一个空格：

<div>blah</div>
<div>blah...</div>
<div>blahblah...</div>

有各种解决方法，例如删除代码中的空格：

<div>blah</div><div>blah...</div><div>blahblah...</div>

或者将父元素设置为font-size: 0，然后将子div设置为您想要的任何字体大小。

我个人认为这是关于这个主题的有趣帖子：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

如果div元素显示为inline-block，那么它们之间存在空格的原因是因为它识别div元素之间的所有新行和空格以及修剪他们到一个空间角色。这就是你所看到的空间。

如果适用于您的情况，您可以使用float: left;解决此问题。当然，由于花车，你可能不得不将它们限制在自己的block formatting context。

另一个解决方案是摆脱div元素之间的新行和空格。你可以这样做：

<强> HTML：

<div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div
><div><img src="picture.jpg"></div>

Answer 3

除非您必须使用display: inline-block;，否则请参阅我的答案底部的链接以获取各种解决方案。

最佳解决方案是将display: inline-block;更改为float: left;，因为默认情况下它们会相互浮动。

如果他们是inline-block，您需要添加margin-right: -4px来抵消默认margin-right。

这是因为您的问题缺少HTML / CSS。

以下是处理inline-blocks默认保证金CSS-Tricks Inline-block

的几个选项