删除相对定位元素之间的边距[重复]

【问题标题】：remove margin between relatively positioned elements [duplicate]删除相对定位元素之间的边距[重复]
【发布时间】：2015-06-20 03:09:41
【问题描述】：

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

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

【问题讨论】：

为了方便任何可能回答此问题的人，here is a jsfiddle
代替display: inline-block，使用float: left
或使用#parent div{ margin-left: -4px}

标签： html css margin spacing

【解决方案1】：

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

将容器的字体大小设置为 0px。
使用 font-size: 1rem 重置内联元素的字体大小；

这里有一个小提琴来演示：

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%;
}

这是没有空格的小提琴：http://jsfiddle.net/ucuzpb4d/1/

【讨论】：

哦。这解决了我的问题。完全忘记了这一点。
不要忘记标记已回答的问题，如果它对您有用:)。