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

Question

我有一些相对定位的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>

Answer 1

你有你的inline-block的元素之间的空白。如果您对DOM有100％的控制权，请确保您的标记之间绝对没有空白。如果您无法控制它，可以通过执行以下操作使用一点解决方法：

1. 将容器的font-size设置为0px。
2. 使用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/