刪除相對定位的元素之間的邊距

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/