为什么这些内联块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><!-- --><div>text</div><!-- --><div>text</div><!-- --><div>text</div><!-- --><div>text</div>

例2-删除断线：(例如)

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

例3-关闭下一行的部分标签(例如)

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

例4-关闭下一行的整个标签：(例如)

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

方法2-重置font-size

由于inline元素由font-size，您可以简单地重置font-size到0，从而移除元素之间的空间。

只需设置font-size: 0在父元素上，然后声明一个新的font-size儿童元素。如这里所示，这是可行的。(例如)

#parent {     font-size: 0; } #child {     font-size: 16px; }

此方法运行良好，因为它不需要对标记进行更改；但是，如果子元素的font-size声明使用em各单位。因此，我建议从标记中删除空格，或者浮元素从而避免了inline元素。

方法3-将父元素设置为display: flex

在某些情况下，您还可以设置display的父元素的flex. (例如)

这有效地消除了受支持的浏览器..不要忘记添加适当的供应商前缀来提供额外的支持。

.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>

---

双方注意到：

使用负边距移除之间的空格是难以置信的不可靠的。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 {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;}

Answer 4

找到了一个不涉及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;}