为什么这些内联块 div 元素之间存在无法解释的差距? [英] Why is there an unexplainable gap between these inline-block div elements?

问题描述

我有两个内联块 div 元素，它们是相同的，彼此相邻放置.然而，尽管边距设置为 0，但两个 div 之间似乎有一个 4 像素的神秘空间.没有父 div 影响它们 - 这是怎么回事?

CSS

#container{显示:内联块；位置:相对；背景:RGB(255,100,0)；边距:0px；宽度:40%；高度:100px；}

这就是我想要的样子:

解决方案

在这种情况下，您的 div 元素已从 block 级别元素更改为 inline 元素.inline 元素的一个典型特征是它们尊重标记中的空格.这解释了为什么元素之间会产生间隙空间.(示例)

有一些解决方案可以用来解决这个问题.

方法 1 - 从标记中删除空格

示例 1 - 注释掉空格:(示例)

text