Html 为什么文本块会移到底部？

为什么文本块会移到底部？我知道如何解决这个问题（需要在框中添加“overflow:hidden”），但我不明白为什么它会移到底部，框中的文本很短，browser inspector中的边距与示例中没有文本的边距相同

HTML:

---

您可以尝试添加垂直对齐：

.box1 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: blue;
  /* overflow: hidden; */
  color: white;
  vertical-align:top;
}

---

问题在于默认情况下，内联元素的垂直对齐–基线

元素内部的文本会影响它并将div推到底部

---

使用

垂直对齐：top

解决问题

添加

vertical align:top

，否则它将尝试对齐元素中的文本。您也可以使用flexbox方法代替display:inline块谢谢，现在我明白了！文本流中存在具有内联块特性的div，因此它具有“按文本对齐”属性

html, body {
  font-size: 10px;
  margin: 0;
  height: 100%;
}

.box1 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: blue;
  /* Fix the problem */
  /* overflow: hidden; */
  color: white;
}

.box2 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: red;
}

.with-text:before {
  display: block;
  content: "with-text";
  text-transform: uppercase;
  margin: 1rem;
}

.with-text {
  box-sizing: border-box;
  height: 50%;
  border: 1px solid;
}

.without-text:before {
  display: block;
  content: "without text";
  text-transform: uppercase;
  margin: 1rem;
}

.without-text { 
  box-sizing: border-box;
  height: 50%;
  border: 2px solid black;
}

.box1 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: blue;
  /* overflow: hidden; */
  color: white;
  vertical-align:top;
}