HTML/CSS White spaces still present even after commenting new lines - html

Question

This very simple html structure
<div id="s1container"><!--
--><div class="s1box"></div><!--
--></div>
which has been commented to try to delete white spaces between the elements, with the following css still produces an unwanted padding in the bottom between both elements
#s1container {
background: gray;
text-align: center;
}
.s1box {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background: #ccc;
padding: 0;
margin: 0;
}
As you can see from this fiddle
https://jsfiddle.net/um1L4c0t/
The only way to ameliorate this problem, is to set the font-size to 0em on the parent and set it back to 1em to the children, which is not a solution considering i'm extensively using em units for the boxes dimensions, the nesting property of ems would make that kind of layout impossible if the parent's font-size is set to 0em
Why is the white space still present even after commenting out the white spaces between those elements?

Answer 1

The comments take out the right white space, vertical-align: top; get rid of the bottom.
* {
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>
A more modern approach is to use flexbox, where you get the good from both worlds
* {
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

Remove display: inline-block; and use margin: 0 auto;