HTML/CSS白色的空間仍然存在，甚至評論新線

Question

這個非常簡單的HTML結構

<div id="s1container"><!-- 
    --><div class="s1box"></div><!-- 
--></div> 

已經評價嘗試刪除元素之間的白色空間，用下面的CSS仍然會產生不必要的填充後在這兩個元素之間的底部

#s1container { 
     background: gray; 
     text-align: center; 
    } 

    .s1box { 
     position: relative; 
     display: inline-block; 
     width: 200px; 
     height: 200px; 
     background: #ccc; 
     padding: 0; 
     margin: 0; 
    } 

你可以從這個小提琴看到

https://jsfiddle.net/um1L4c0t/

解決此問題的唯一方法是將父級的font-size設置爲0em，並將其設置回1em給孩子，考慮到我廣泛使用em單元作爲方塊，這不是一種解決方案尺寸，EMS的嵌套特性會做出那樣的佈局是不可能的，如果父母的字體大小設置爲0EM

爲什麼是白色的空間，即使這些元素之間註釋掉的空格後仍然存在？

Answer 1

評論取出正確的空格，vertical-align: top;擺脫底部。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#s1container { 
 
    background: gray; 
 
    text-align: center; 
 
} 
 

 
.s1box { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #ccc; 
 
    padding: 0; 
 
    margin: 0; 
 
    vertical-align: top; 
 
}

<div id="s1container"><!-- 
 
--><div class="s1box"></div><!-- 
 
--></div>

---

更先進的方法是使用flexbox，你來自哪裏，兩全其美得到良好

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#s1container { 
 
    background: gray; 
 
    text-align: center; 
 
    display: flex; 
 
} 
 

 
.s1box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #ccc; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
}

<div id="s1container"> 
 
<div class="s1box"></div> 
 
</div>

Answer 2

雷莫ve display：inline-block;並使用margin：0 auto;