移除相对定位元素之间的边距

Question

我有一些相对定位的 inline-block 元素并排放置在父元素中，并且我已经将 margin:0 应用于父元素的所有子元素，但它们仍然有一些 space 在它们之间。这里发生了什么？

#parent {
  height: 100px;
}
#parent * {
  margin: 0;
}
#parent div {
  display: inline-block;
  position: relative;
  border: 1px solid red;
  width: 50px;
  height: 100%;
}

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

您的行内块元素之间有白色 space。如果您对 DOM 有 100% 的控制权，请确保您的标记之间绝对没有白色 space。如果您无法控制它，您可以通过执行以下操作来使用一些解决方法：

将容器的字体大小设置为 0px。
使用 font-size: 1rem;

这里有一个fiddle来演示：

http://jsfiddle.net/ucuzpb4d/

#parent {
  height: 100px;
  font-size: 0px;
}
#parent * {
  margin: 0;
}
#parent div {
  font-size: 1rem;
  display: inline-block;
  position: relative;
  border: 1px solid red;
  width: 50px;
  height: 100%;
}

这是没有白色的 fiddle-space：http://jsfiddle.net/ucuzpb4d/1/

移除相对定位元素之间的边距

remove margin between relatively positioned elements

html

css

margin

spacing