Question

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

这是一个基本的例子，我有三个应该是连续的黑盒子，但它们之间有空白区域：（Fiddle）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

内联块不良边距众所周知，您可以找到其他解决方案here

Answer 7

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

Answer 8

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用＆＃34; display：inline-block＆＃34;连续放入div，没有边距？

8 个答案: