为什么这些内联块div元素之间有一个无法解释的差距？

Question

为什么这些内联块div元素之间有一个无法解释的差距？

我有两个内嵌区div元素，它们是相同的，位于相邻的位置。然而，在这两个div之间似乎有一个4像素的神秘空间，尽管边距设置为0。没有父母影响他们-怎么回事？

CSS

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

这就是我想要的样子：

Answer 1

在这种情况下，您的div元素已从block级别元素inline元素。一个典型的特征inline元素是它们尊重标记中的空格。这就解释了为什么空隙空间在元素之间产生。(例如)有几个解决方案可以用来解决这个问题。方法1-从标记中删除空白例1-将空格注释掉：(例如)<div>text</div><!--&nbsp;--><div>text</div><!--&nbsp;--><div>text</div><!--&nbsp;--><div>text</div><!--&nbsp;--><div>text</div>例2-删除断线：(例如)<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>例3-关闭下一行的部分标签(例如)<div>text</div&nbsp;><div>text</div&nbsp;><div>text</div&nbsp;><div>text</div&nbsp;><div>text</div>例4-关闭下一行的整个标签：(例如)<div>text&nbsp;</div><div>text&nbsp;</div><div>text&nbsp;</div><div>text&nbsp;</div><div>text&nbsp;</div>方法2-重置font-size由于inline元素由font-size，您可以简单地重置font-size到0，从而移除元素之间的空间。只需设置font-size: 0在父元素上，然后声明一个新的font-size儿童元素。如这里所示，这是可行的。(例如)#parent&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;0;&nbsp;}&nbsp;#child&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;16px;&nbsp;}此方法运行良好，因为它不需要对标记进行更改；但是，如果子元素的font-size声明使用em各单位。因此，我建议从标记中删除空格，或者浮元素从而避免了inline元素。方法3-将父元素设置为display: flex在某些情况下，您还可以设置display的父元素的flex.&nbsp;(例如)这有效地消除了受支持的浏览器..不要忘记添加适当的供应商前缀来提供额外的支持。.parent&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex;&nbsp;}&nbsp;.parent&nbsp;>&nbsp;div&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;1em;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;2px&nbsp;solid&nbsp;#f00;&nbsp;}.parent {&nbsp; &nbsp; display: flex;}.parent > div {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; padding: 1em;&nbsp; &nbsp; border: 2px solid #f00;}<div class="parent">&nbsp; &nbsp; <div>text</div>&nbsp; &nbsp; <div>text</div>&nbsp; &nbsp; <div>text</div>&nbsp; &nbsp; <div>text</div>&nbsp; &nbsp; <div>text</div></div>双方注意到：使用负边距移除之间的空格是难以置信的不可靠的。inline元素。如果有其他更好的解决方案，请不要使用负边距。

Answer 2

使用inline-block允许在HTML中使用空白，这通常等于.25em(或4PX)。您可以注释掉空白，或者，更通用的解决方案是设置父的font-size并将其重置为内联块元素上所需的大小。

Answer 3

inline-block自动设置默认值white-space就像大家都说的。(这是由于元素“内联”属性，与您的文本字符串中单词之间的间距相同。HTML标记。这就是为什么white-space在标记中也可以工作。)最简单的解决办法就是float集装箱。(例如。float: left;)在另一个注意事项上，每个id应该是唯一的，意味着您不能使用相同的id两次相同HTML文件。您应该使用类，而可以使用相同的类。class多个元素。.container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;rgb(255,&nbsp;100,&nbsp;0); &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;40%; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;}

Answer 4

找到了一个不涉及Flex的解决方案，因为Flex在旧的浏览器中不能工作。例子：.container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:block; &nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;height:150px; &nbsp;&nbsp;&nbsp;&nbsp;width:1024px; &nbsp;&nbsp;&nbsp;&nbsp;margin:0&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;padding:0px; &nbsp;&nbsp;&nbsp;&nbsp;border:0px; &nbsp;&nbsp;&nbsp;&nbsp;background:#ececec; &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:10px; &nbsp;&nbsp;&nbsp;&nbsp;text-align:justify; &nbsp;&nbsp;&nbsp;&nbsp;box-sizing:border-box; &nbsp;&nbsp;&nbsp;&nbsp;white-space:nowrap; &nbsp;&nbsp;&nbsp;&nbsp;font-size:0pt; &nbsp;&nbsp;&nbsp;&nbsp;letter-spacing:-1em;}.cols&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:inline-block; &nbsp;&nbsp;&nbsp;&nbsp;position:relative; &nbsp;&nbsp;&nbsp;&nbsp;width:32%; &nbsp;&nbsp;&nbsp;&nbsp;height:100%; &nbsp;&nbsp;&nbsp;&nbsp;margin:0&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;margin-right:2%; &nbsp;&nbsp;&nbsp;&nbsp;border:0px; &nbsp;&nbsp;&nbsp;&nbsp;background:lightgreen;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;box-sizing:border-box; &nbsp;&nbsp;&nbsp;&nbsp;padding:10px; &nbsp;&nbsp;&nbsp;&nbsp;font-size:10pt; &nbsp;&nbsp;&nbsp;&nbsp;letter-spacing:normal;}.cols:last-child&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin-right:0;}