html - Safari 9 中的子框未垂直居中

Question

在下面的代码片段中，.inner1 和 .inner2 在 .outer 中没有严格垂直居中。我使用了 Safari 的内置网络检查器，但我发现框之间没有边距。

.outer {
  display: inline-block;
  border: 1px solid silver;
}
.inner {
  display: inline-block;
  margin: 0;
  width: 50px;
  height: 10px;
}
.inner1 {
  border: 1px solid yellow;
}
.inner2 {
  border: 1px solid blue;
}

<div class="outer">
  <span class="inner inner1"></span>
  <span class="inner inner2"></span>
</div>

是什么阻止了盒子相互接触，我该如何解决这个问题？

我正在使用 Safari 9.1.2

Answer 1

它是 inline-block 元素上的空白，删除它的一种方法是删除元素之间的 HTML 中的空白。

.outer {
  display: inline-block;
  border: 1px solid silver;
}
.inner {
  display: inline-block;
  margin: 0;
  width: 50px;
  height: 10px;
}
.inner1 {
  border: 1px solid green;
}
.inner2 {
  border: 1px solid blue;
}

<div class="outer">
  <span class="inner inner1"></span><span class="inner inner2"></span>
</div>

您还可以使用 Flexbox 删除空白并获得子元素的 vertical-align。

.outer {
  border: 1px solid silver;
  display: inline-flex;
  align-items: center;
}
.inner {
  margin: 0;
  width: 50px;
  height: 10px;
}
.inner1 {
  border: 1px solid green;
}
.inner2 {
  border: 1px solid blue;
}

<div class="outer">
  <span class="inner inner1"></span>
  <span class="inner inner2"></span>
</div>