为什么垂直对齐会影响上一个（相同作用域）元素？

Question

<div id="hero" class="wrapper">
  <div id="hero-left">
    <div id="selectors-div">
      <span>Some text</span>
    </div>
  </div>
  <div id="hero-right">
  </div>
</div>

如您所见，#hero-left位于#hero-right之前，但是由于某种原因，#hero-left一直被向下推到底，直到{{1 }}与<span>的基线对齐。

我认为这是非常奇怪的行为，因为这在我之前从未发生过，所以我开始弄乱设置#hero-right，但更奇怪的是，当我在任何一个 related 元素...最终，我随机尝试将相同的属性值放入vertical-align: top和Voila ...通过将该值设置为 latter 元素，前者受到影响...

为什么会这样？我被告知#hero-right仅会影响自身，并固有地影响其子代的位置（基于自身），但不会影响自身，其父项，其父项的父项……我想念什么？

工作示例：

vertical-align

body {
  font-family: 'Kanit', sans-serif;
  margin: 0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

#header {
  height: 100px;
  display: flex;
}

#header-left {
  margin: auto 0 auto 25px;
}

#header-left>img {
  height: 50px;
  margin: auto 0;
}

#header-right {
  margin: auto 0 auto auto;
}

#header-list {
  list-style-type: none;
  display: inline-block;
  margin: auto 0;
}

#header-list>li {
  display: inline;
  font-weight: bold;
  font-size: 13px;
}

#header-list>li>a {
  text-decoration: none;
  color: black;
}

#header-list>li>a:hover {
  color: #2C85D0;
}

#vertical-spacer {
  height: 26px;
  width: 1px;
  margin: 0px 5px;
  display: inline-block;
  background-color: darkgray;
  vertical-align: middle
}

#navbar {
  height: 60px;
  background-color: #252835;
}

.menu-left {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 0;
}

.menu-left>li {
  text-decoration: none;
  display: inline-block;
  height: 100%;
}

.menu-item-div {
  height: 100%;
  width: 200px;
  border-right: 1px solid darkgray;
}

.menu-item-div>span {
  line-height: 60px;
  margin-left: 20px;
  font-size: 18px;
  color: white;
}

#section-type {
  height: 100px;
  background-color: darkgrey;
}

#section-type>span {
  line-height: 100px;
  margin-left: 20px;
  font-size: 35px;
}

#hero {
  height: 1000px;
  background-color: red;
  font-size: 0;
}

#hero-left {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-color: blue;
  font-size: 13px;
}

#hero-right {
  display: inline-block;
  width: 70%;
  height: 100%;
  background-color: orange;
  font-size: 18px;
}

#selectors-div {
  height: 100%;
}

#selectors-div>span {}

断例

<link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">

<div id="header" class="wrapper">
  <div id="header-left">
    <img src="https://pcbuilding2017.files.wordpress.com/2017/03/pcpartpicker.png?w=669&h=144&crop=1" alt="">
  </div>
  <div id="header-right">
    <ul id="header-list">
      <li><span style="font-weight: normal;">Welcome</span></li>
      <li><a href="">Username</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Inventory</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Favorite Parts</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Saved Parts Lists</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Log Out</a></li>
      <li><span id="vertical-spacer"></span></li>
      <li><a href="">Canada</a></li>
      <li><span id="vertical-spacer"></span></li>
    </ul>
  </div>
</div>

<div id="navbar" class="wrapper">
  <ul class="menu-left">
    <li>
      <div class="menu-item-div">
        <span>Desktop</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>Laptop</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>All-in-One</span>
      </div>
    </li>
    <li>
      <div class="menu-item-div">
        <span>Mini</span>
      </div>
    </li>
  </ul>
</div>

<div id="section-type" class="wrapper">
  <span>Choose a Desktop</span>
</div>

<div id="hero" class="wrapper">
  <div id="hero-left">
    <div id="selectors-div">
      <span>a</span>
    </div>
  </div>
  <div id="hero-right" style="vertical-align: top;">
  </div>
</div>

body {
  font-family: 'Kanit', sans-serif;
  margin: 0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

#header {
  height: 100px;
  display: flex;
}

#header-left {
  margin: auto 0 auto 25px;
}

#header-left>img {
  height: 50px;
  margin: auto 0;
}

#header-right {
  margin: auto 0 auto auto;
}

#header-list {
  list-style-type: none;
  display: inline-block;
  margin: auto 0;
}

#header-list>li {
  display: inline;
  font-weight: bold;
  font-size: 13px;
}

#header-list>li>a {
  text-decoration: none;
  color: black;
}

#header-list>li>a:hover {
  color: #2C85D0;
}

#vertical-spacer {
  height: 26px;
  width: 1px;
  margin: 0px 5px;
  display: inline-block;
  background-color: darkgray;
  vertical-align: middle
}

#navbar {
  height: 60px;
  background-color: #252835;
}

.menu-left {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 0;
}

.menu-left>li {
  text-decoration: none;
  display: inline-block;
  height: 100%;
}

.menu-item-div {
  height: 100%;
  width: 200px;
  border-right: 1px solid darkgray;
}

.menu-item-div>span {
  line-height: 60px;
  margin-left: 20px;
  font-size: 18px;
  color: white;
}

#section-type {
  height: 100px;
  background-color: darkgrey;
}

#section-type>span {
  line-height: 100px;
  margin-left: 20px;
  font-size: 35px;
}

#hero {
  height: 1000px;
  background-color: red;
  font-size: 0;
}

#hero-left {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-color: blue;
  font-size: 13px;
}

#hero-right {
  display: inline-block;
  width: 70%;
  height: 100%;
  background-color: orange;
  font-size: 18px;
}

#selectors-div {
  height: 100%;
}

#selectors-div>span {}