html – 为什么带有文本的块会移到底部？

2023年4月17日 259次阅读

为什么带有文本的块会移到底部？我知道如何解决这个问题(需要在框中添加“overflow：hidden”),但我不明白为什么它移到底部,框内的文字很短,浏览器检查器中的边距与边距相同没有文字的例子.

Example of the problem

HTML：

<div class="with-text">
  <div class="box1">
    SIMPLE TEXT
  </div>
  <div class="box2">
  </div>
</div>
<div class="without-text">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

CSS：

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;
}

最佳答案 问题是默认情况下内联元素的垂直对齐 – 基线,

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

使用vertical-align：top解决问题.

点赞