我正在學(xué)習(xí)CSS，并嘗試寫一些代碼；我有三個(gè)具有內(nèi)嵌塊和指定維度的div元素。正如所料，這三個(gè)元素緊挨著出現(xiàn)，但是當(dāng)我在第三個(gè)div中插入一個(gè)子元素時(shí)，它突然向下移動(dòng)了大約190個(gè)像素，為什么會(huì)這樣呢？

在子元素& quot您的文本& quot：

使用子元素:

body {
  margin: 0;
}

h1 {
  margin: 0;
}

.size {
  width: 200px;
  height: 200px;
}

.col1 {
  display: inline-block;
  background-color: powderblue;
}

.col2 {
  display: inline-block;
  background-color: red;
}

.col3 {
  display: inline-block;
  background-color: blue;
}

<div class="size col2">

</div>
<div class="size col3">

</div>

<div class="size col1">
  <span>Hello</span>
</div>