Html 为什么这些内联块div元素之间存在无法解释的间隙？

我有两个内联块

div

元素，它们是相同的，彼此相邻。然而，两个div之间似乎有一个神秘的4像素空间，尽管边距被设置为0。没有家长div影响他们-发生了什么

CSS

这就是我希望它看起来的样子：

---

在本例中，您的

div

元素已从

block

级别元素更改为

inline

元素。

inline

元素的一个典型特征是它们尊重标记中的空白。这解释了为什么元素之间会产生间隙

有几个解决方案可以用来解决这个问题

方法1-从标记中删除空白 示例1-将空格注释掉：

这种方法工作得很好，因为它不需要更改标记；但是，如果子元素的

font size

是使用

em

单位声明的，则它不起作用。因此，我建议将空白从标记中删除，或者避免

inline

元素生成的空间

.container {
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}

方法3-将父元素设置为

display:flex

在某些情况下，还可以将父元素的

显示设置为
flex

这将有效地删除中元素之间的空间。不要忘记添加适当的供应商前缀以获得额外的支持

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}


.parent{
显示器：flex；
}
.parent>div{
显示：内联块；
填充：1em；
边框：2px实心#f00；
}

文本
文本
文本
文本
文本
使用
内联块
允许在HTML中使用空格，这通常等于.25em（或4px）

您可以注释掉空白，或者，更常见的解决方案是将父级的
字体大小设置为0，并在内联块元素上将其重置为所需大小。
最简单的修复方法是只浮动容器。（例如，
float:left；
）在另一个注释中，每个
id
应该是唯一的，这意味着您不能在同一
HTML
文档中使用同一
id
两次。您应该改用类，这样您就可以对多个元素使用相同的
class

.container {
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}

只需添加一个边框：
2px solid#e60000
；到你的第二个div标签CSS

肯定有用

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}

找到了一个不涉及Flex的解决方案，因为Flex在旧浏览器中不起作用。
例如：

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

您需要添加

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

因为无论何时编写
display:inline block
，都需要额外的
右边距：4px
。所以，你需要删除它。
好吧，我想我可以用负的边距来修补它-谢谢：）但是我不知道什么或者如何去除空白-因为没有人真正费心解释为什么会发生这种情况。。。内联（和内联块）元素尊重标记中的空白，因此您看到的基本上是标记中“单词”之间的空格字符。这就是为什么设置负的
字间距也可以“修复”这个问题，尽管负的字间距和负的边距是无效的解决方案，因为间距取决于浏览器和字体大小（如Josh的最后一个示例所示），因此，如果你做了任何更改，这将是第一件会中断的事情。当你花20分钟调试CSS时，结果发现Chrome被放大到了110%，而且从来没有出现过任何差距。我想说，
display:flex
是目前最好的解决方案。
font size
是唯一一个对我有效的解决方案，它在两个
内联块
元素之间提供了额外的垂直空间（通过这种方式将
文本对齐：在另一个
div
中居中对齐）。
flex
完全扰乱了布局，尽管这样做可行（thakyou）这会导致我的页面布局出现其他问题，我可能目前还没有经验，无法通过添加
float
属性来解决。您强制元素充当块元素，因此
display:inline block
不适用。这是一个我从未想到的很酷的解决方案，但不幸的是，它破坏了正常的CSS字体大小的重要性：/@colllin是的，它有…但你必须意识到。内联块和浮点都有它们的“陷阱”…如何解决它们是一个选择。字体解决方案是一个选项，但不是唯一的一个。当然，但减少我“必须意识到”的事情这总是一件好事，保护自己不在6个月内意外破坏某些东西也是一件好事。@Pauli_D你也可以在元素之间添加注释，因为它们不仅删除了文档中的空白，而且还删除了网站上的空白。当你有大量元素时，这有点难看，让人感到痛苦。谢谢你，我很清楚这些元素的多样性s处理
内联块的方法
…这只是两年前的一种。有一个更简单的答案，但这太旧了，我将它作为一个注释。与其使用内联块使它们并排排列，不如使用
float:left
并将它们的容器居中。我的测试中没有间隙。
.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.container {
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}