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;
    }

从这个 fiddle 可以看出

https://jsfiddle.net/um1L4c0t/

改善此问题的唯一方法是将父级的字体大小设置为 0em，并将其设置回子级的 1em，考虑到我广泛使用 em 单位作为框尺寸，这不是解决方案，如果父级的字体大小设置为 0em，ems 的嵌套属性将使这种布局变得不可能

为什么注释掉这些元素之间的空白后，空白仍然存在？

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>