一個小例子:

<div class="c">
  <div class="item">
    <div class="wrap">
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
    </div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

.wrap {
  width: 100px;
  height: 50px;
  background: green;
}

.wrap-item {
  width: 30px;
  height: 30px;
  background: gray;
  display: inline-block;
}

密碼筆。 請解釋為什么第一個元素下移。我注意到這受到元素高度的影響，但我想不通為什么會這樣。這是標準行為還是我做錯了？如果這是標準行為，我該如何糾正？

您正在尋找垂直對齊。默認值是baseline，這意味著它將元素的基線與其鄰居對齊。內(nèi)部內(nèi)容定義了基線，因此灰色包裝項目的底部與其他黑色方塊的底部對齊。

相反，我們可以與高層保持一致，讓一切恢復(fù)正常。

.item {
  vertical-align: top
}

.item {
  width: 100px;
  height: 100px;
  background-color: black;
  display: inline-block;
  vertical-align: top;
}

.wrap {
  width: 100px;
  height: 50px;
  background: green;
}

.wrap-item {
  width: 30px;
  height: 30px;
  background: gray;
  display: inline-block;
}

<div class="c">
  <div class="item">
    <div class="wrap">
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
      <div class="wrap-item"></div>
    </div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>