为什么插入文本后，红色方块会下降？

Question

何时输入“为什么？”在第一个div中不存在，两个正方形并排放置。存在时，红色方块会下降吗？为什么会这样呢？我知道初学者的问题。

body{
	margin: 0
}

div {
	border: 10px solid;
	display: inline-block;
	font-size: 30px;
	height: 200px;
	width: 200px
}

#ed{
	border-color: red
}

#ed2{
	border-color: blue
}

<div id="ed">WHY?</div>
<div id="ed2"></div>

Answer 1

因为内联元素的默认vertical alignment是baseline。为了使它们按预期排列，将其设置为顶部：

body {
  margin: 0
}

div {
  border: 10px solid;
  display: inline-block;
  font-size: 30px;
  height: 200px;
  width: 200px;
  vertical-align:top;
}

#ed {
  border-color: red
}

#ed2 {
  border-color: blue
}

<div id="ed">WHY?</div>
<div id="ed2"></div>