Html 为什么这些内联块 div 元素之间存在无法解释的差距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19038799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is there an unexplainable gap between these inline-block div elements?
提问by Legatro
I have two inline-block divelements, 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?
我有两个内联块div元素，它们是相同的，彼此相邻。然而，尽管边距设置为 0，但两个 div 之间似乎有一个 4 像素的神秘空间。没有父 div 影响它们 - 这是怎么回事？
CSS
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
This is what i want it to look like:
这就是我想要的样子：
回答by Josh Crozier
In this instance, your divelements have been changed from blocklevel elements to inlineelements. A typical characteristic of inlineelements is that they respect the whitespace in the markup. This explains why a gapof space is generated between the elements. (example)
在这种情况下，您的div元素已从block级别元素更改为inline元素。inline元素的一个典型特征是它们尊重标记中的空白。这就解释了为什么元素之间会产生空间间隙。（例子）
There are a few solutions that can be used to solve this.
有一些解决方案可用于解决此问题。
Method 1 - Remove the whitespace from the markup
方法 1 - 从标记中删除空格
Example 1- Comment the whitespace out: (example)
示例 1- 注释掉空格：（示例）
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Example 2- Remove the line breaks: (example)
示例 2- 删除换行符：（示例）
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Example 3- Close part of the tag on the next line (example)
示例 3- 关闭下一行的部分标签（示例）
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Example 4- Close the entire tag on the next line: (example)
示例 4- 在下一行关闭整个标签：（示例）
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
Method 2 - Reset the font-size
方法 2 - 重置 font-size
Since the whitespace between the inlineelements is determined by the font-size, you could simply reset the font-sizeto 0, and thus remove the space between the elements.
由于inline元素之间的空格由 决定font-size，您可以简单地将 重置font-size为0，从而删除元素之间的空格。
Just set font-size: 0on the parent elements, and then declare a new font-sizefor the children elements. This works, as demonstrated here (example)
只需font-size: 0在父元素上设置，然后font-size为子元素声明一个新元素。这有效，如此处所示（示例）
#parent {
font-size: 0;
}
#child {
font-size: 16px;
}
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-sizeis declared using emunits. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elementsand thus avoiding the space generated by inlineelements.
这种方法效果很好，因为它不需要更改标记；但是，如果子元素font-size是使用em单位声明的，则它不起作用。因此，我建议从标记中删除空格，或者浮动元素，从而避免inline元素产生的空间。
Method 3 - Set the parent element to display: flex
方法 3 - 将父元素设置为 display: flex
In some cases, you can also set the displayof the parent element to flex. (example)
在某些情况下，您还可以display将父元素的 设置为flex。（例子）
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>Sides notes:
边注：
It is incredibly unreliable to use negative margins to remove the space between inlineelements. Please don't use negative margins if there are other, more optimal, solutions.
使用负边距来消除inline元素之间的空间是非常不可靠的。如果有其他更优化的解决方案，请不要使用负边距。
回答by Paulie_D
Using inline-blockallows for white-space in your HTML, This usually equates to .25em (or 4px).
使用inline-block允许在 HTML 中使用空格，这通常等于 .25em（或 4px）。
You can either comment out the white-space or, a more commons solution, is to set the parent's font-sizeto 0 and the reset it back to the required size on the inline-block elements.
您可以注释掉空白，或者更常见的解决方案是将父项设置font-size为 0，然后将其重置为行内块元素所需的大小。
回答by bradcush
inline-blockautomatically sets a default white-spacelike everyone is saying. (This is due to the elements "inline" properties, the same as spacing between words in a string of text in your HTMLmarkup. This is why removing white-spacein the markup also works.) The easiest fix is to just floatthe container. (eg. float: left;) On another note, each idshould be unique, meaning you can't use the same idtwice in the same HTMLdocument. You should use classes instead, where you can use the same classfor multiple elements.
inline-blockwhite-space像每个人所说的那样自动设置默认值。（这是由于元素的“内联”属性，与HTML标记中文本字符串中单词之间的间距相同。这就是white-space在标记中删除也有效的原因。）最简单的解决方法是仅float使用容器。（例如。float: left;）在另一个注意事项中，每个都id应该是唯一的，这意味着您不能在同id一个HTML文档中使用相同的两次。您应该改用类，您可以在其中class对多个元素使用相同的类。
.container {
display: inline-block;
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
回答by Larry
Found a solution not involving Flex, because Flex doesn't work in older Browsers. Example:
找到了一个不涉及 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;
}
回答by Podile venkata krishna
simply add a border: 2px solid #e60000; to your 2nd div tag CSS.
只需添加一个边框：2px solid #e60000; 到您的第二个 div 标签 CSS。
Definitely it works
绝对有效
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
回答by BigFan
You need to add
你需要添加
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
margin-right:-4px;
}
because whenever you write display:inline-blockit takes an additional margin-right:4px. So, you need to remove it.
因为无论何时你写display:inline-block它都需要额外的margin-right:4px. 所以，你需要删除它。
