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

Question

我曾经text-align: center定位三个div。但是每个 div 之间都有一个小的差距。为什么会这样？图片在下面给出？div 显示为inline-block.

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;如果适用于您的情况，您可以使用它来解决此问题。当然，由于浮动，您可能必须将它们限制在自己的块格式化上下文中。

另一种解决方案是去掉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