如何将div设置为“display：inline-block”，没有边距？ [重复]

Question

这个问题在这里已有答案：

• 如何删除内联块元素之间的空格？ 37个答案

每当我使用display:inline-block将div放在一个水平行中时，它们之间总会有一个边距，即使我设置了margin: 0 !important 。 有没有办法在div之间有正好0像素？

这是一个基本的例子，我有三个应该是连续的黑盒子，但它们之间有空白区域:( 小提琴 ）

 .div { position: relative; display: inline-block; background: black; width: 100px; height: 100px; margin: 0 !important; } 

 <div class="div"></div> <div class="div"></div> <div class="div"></div> 

Answer 1

这是因为元素之间的新界限。 你可以像我一样评论它，或者让这些元素彼此内联

 .div { position: relative; display: inline-block; background: black; width: 100px; height: 100px; margin: 0 !important; } 

 <div class="div"></div><!-- --><div class="div"></div><!-- --><div class="div"></div> 

Answer 2

您应该将font-size: 0设置为父容器。 字体大小为内联块提供了小的边距。

 .div { position: relative; display: inline-block; background: black; width: 100px; height: 100px; margin: 0 !important; } .container { font-size: 0; } 

 <div class="container"> <div class="div"></div> <div class="div"></div> <div class="div"></div> </div> 

Answer 3

 .divlist { position: relative; font-size: 0; } .div { position: relative; display: inline-block; background: black; width: 100px; height: 100px; font-size: 16px; } 

 <div class="divlist"> <div class="div"></div> <div class="div"></div> <div class="div"></div> </div> 

Answer 4

最好有外部div并添加样式字体大小0

例如：

 .div { position: relative; display: inline-block; background: black; width: 100px; height: 100px; margin: 0 !important; font-size: 14px; color:#fff; text-align:center; } .main-div { font-size:0; } 

 <div class="main-div"> <div class="div">1</div> <div class="div">2</div> <div class="div">3</div> </div> 

Answer 5

使用display: table-cell;

 .div { position: relative; display: table-cell; background: black; width: 100px; height: 100px; } 

 <div class="div"></div> <div class="div"></div> <div class="div"></div> 

Answer 6

我知道这不是最干净的解决方案，但这是我如何做到的：

 .div { display: inline-block; background: black; width: 100px; height: 100px; white-space: nowrap; overflow: hidden; margin-right : -0.25em; } 

 <div class="div"></div> <div class="div"></div> <div class="div"></div> 

内联块不良边缘是众所周知的，您可以在这里找到其他解决方案

Answer 7

正如格列布所说，把font-size:0; 在容器上。 您可以将容器放在display: inline-flex; 或display: flex; 太。

Answer 8

我添加了一个定义为flexbox的包装器。

 .wrapper { display: inline-flex; } .div { position: relative; display: inline-block; background: black; width: 100px; height: 100px; } 

 <div class="wrapper"> <div class="div"></div> <div class="div"></div> <div class="div"></div> </div>