如何使用“display：inline-block”将div放在一行中，没有边距？ [复制]答案

【问题标题】：How to put divs in a row with "display: inline-block", without a margin? [duplicate]如何使用“display：inline-block”将div放在一行中，没有边距？ [复制]
【发布时间】：2017-08-03 19:01:14
【问题描述】：

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

这是一个基本示例，我有三个应该是连续的黑框，但它们之间有空白：(Fiddle)

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

【问题讨论】：

你试过/检查过 flexbox 吗？
stackoverflow.com/questions/5078239/…
有不同的方法来解决这个问题，检查这个链接，这应该会有所帮助：css-tricks.com/fighting-the-space-between-inline-block-elements

标签： html css margin styling

【解决方案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>

【讨论】：

呜呜呜呜。我从来没有想过。太疯狂了。谢谢！

【解决方案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>

【讨论】：

你确定吗？我试过了：jsfiddle.net/ketrb1ac/2
是的：jsfiddle.net/xooL3drg
@Swellar，谢谢，完成:)

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

inline-block 不需要的边距是众所周知的，你会找到其他解决方案here

【讨论】：

【解决方案7】：

正如 Gleb 所说，将font-size:0; 放在容器上。您也可以将容器放入display: inline-flex; 或display: flex;。

【讨论】：

【解决方案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>

【讨论】：

弹性项目被阻止，因此它们不再具有inline-block的显示值
好点。我把它改成了 inline-flex
请注意，使包装器 inline-flex 没有帮助。 inline-flex 元素仍然是 flex 容器，flex 容器的子项是 flex 项，而 flex 项是阻塞的。