Question

我在父级中并排放置了一些相对定位的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>

<xsl:value-of select="system-property('xsl:version')" />

Answer 1

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

将容器的字体大小设置为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/

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

1 个答案: