为什么在这些inline-block div元素之间有一个不可解释的间隙？ [英] Why is there an unexplainable gap between these inline-block div elements?

问题描述

我有两个inline-block div 元素，是相同的，位于彼此的旁边。然而，在两个div之间似乎有一个4像素的神秘空间，尽管边距设置为0.没有父div影响它们 - 发生了什么？

I have two inline-block div elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting them - What is going on?

CSS

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

这是我想要的样子：

推荐答案

在这种情况下，您的 div 元素已从 block code> inline 元素。 inline 元素的典型特征是它们尊重标记中的空格。这解释了为什么在元素之间生成一个空格。 （示例）

In this instance, your div elements have been changed from block level elements to inline elements. A typical characteristic of inline elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)

有

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

示例1 - 评论空白处： （示例）

Example 1 - Comment the whitespace out: (example)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

示例2 - 删除换行符： （示例）

Example 2 - Remove the line breaks: (example)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

示例3 - 关闭下一行的部分标记 （示例）

Example 3 - Close part of the tag on the next line (example)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

示例4 - 关闭下一行的整个标记： （示例）

Example 4 - Close the entire tag on the next line: (example)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

$ b <

由于 inline 元素之间的空格由 font-size ，您可以简单地将 font-size 重置为 0 ，从而删除

Method 2 - Reset the font-size

Since the whitespace between the inline elements is determined by the font-size, you could simply reset the font-size to 0, and thus remove the space between the elements.

只需在父元素上设置 font-size：0 ，然后声明一个新的 font-size 用于children元素。如下所示： （示例）

Just set font-size: 0 on the parent elements, and then declare a new font-size for the children elements. This works, as demonstrated here (example)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

这种方法效果不错，因为它不需要更改标记;然而，如果使用 em 单位声明子元素的 font-size 因此，我建议从标记中删除空格，或者 浮动元素 ，因此避免 inline 元素产生的空间。

This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size is declared using em units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline elements.

在某些情况下，您也可以设置 display 父元素到 flex 。 （示例）

In some cases, you can also set the display of the parent element to flex. (example)

这有效地删除了支持的浏览器中的元素之间的空格。不要忘记添加适当的供应商前缀以获得更多支持。

This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.

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

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

<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

使用负边距来移除内联之间的空格是不可靠的元素。如果有其他更优化的解决方案，请不要使用负边距。

It is incredibly unreliable to use negative margins to remove the space between inline elements. Please don't use negative margins if there are other, more optimal, solutions.

这篇关于为什么在这些inline-block div元素之间有一个不可解释的间隙？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！