为什么这些内联块div元素之间存在无法解释的差距?

我有两个内嵌块div元素,它们是相同的,彼此相邻放置。 但是,尽pipe边距设置为0,但两个div之间似乎还有一个4像素的神秘空间。没有父节点影响它们 – 发生了什么?

CSS

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

Div问题

这就是我想要的样子:

它应该是什么样子

在这种情况下,您的div元素已经从block级元素更改为inline元素。 inline元素的典型特征是它们尊重标记中的空白。 这就解释了为什么元素之间会产生空隙。 (例)

有几个解决scheme可以用来解决这个问题。

方法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 – closures下一行标记的一部分(示例)

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

示例4 – closures下一行的整个标签:( 示例)

 <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; } 

这种方法工作得很好,因为它不需要改变标记; 但是,如果使用em单位声明子元素的font-size ,则不起作用。 因此,我build议从标记中删除空白,或者将元素浮动 ,从而避免由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-block允许HTML中的空格,通常等于0.25em(或4px)。

您可以注释掉空格或更常见的解决scheme是将父级的font-size为0,并将其重置为内嵌块元素上所需的大小。

inline-block自动允许像每个人都在说的白色空间。 最简单的解决方法是只添加float:left; 到像这样的容器声明。 你也不能在一个页面上使用两个ID。 改用类。

 .container { display: inline-block; 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 } 

find了一个不涉及Flex的解决scheme,因为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; }