如何将 div 与 "display: inline-block" 连续放置，没有边距？

Question

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

这是一个基本示例，我有三个应该连续的黑框，但它们之间有白色 space：(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>

Answer 1

你应该把 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 2

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

这是因为元素之间换行了。你可以像我一样评论它，或者让这些元素相互内联

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

我添加了一个定义为 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>

Answer 5

最好有外部 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 6

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

Answer 7

使用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 8

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

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

行内块不良余量众所周知，您会找到其他解决方案here

如何将 div 与 "display: inline-block" 连续放置，没有边距？

How to put divs in a row with "display: inline-block", without a margin?

html

css

margin

styling