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单位作为盒子尺寸如果父级的font-size设置为0em，那么ems的嵌套属性会使这种布局变得不可能

为什么即使在评论出这些元素之间的空白之后，空白区域仍然存在？

Answer 1

评论取出了正确的空格，vertical-align: top;摆脱了底部。

＆＃13;

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

＆＃13;

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

＆＃13;

更现代的方法是使用flexbox，从这两个世界中获得好处

＆＃13;

* {
  padding: 0;
  margin: 0;
}

#s1container {
  background: gray;
  text-align: center;
  display: flex;
}

.s1box {
  width: 200px;
  height: 200px;
  background: #ccc;
  padding: 0;
  margin: 0 auto;
}

＆＃13;

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

＆＃13;

Answer 2

删除display：inline-block;并使用保证金：0自动;

HTML / CSS即使在评论新行后，白色空间仍然存在

2 个答案: