如何设置div高度使其自适应内容？

方案1：移除固定高度+调整行高 #

直接删掉CSS里固定的height:50px，同时设置line-height:1让行高和字体大小匹配，div会自动贴合内容高度：

.divText {
  border: solid;
  font-size: 50px;
  width: 70px;
  line-height: 1; /* 消除行高带来的额外上下空间 */
}

方案2：针对Emoji的精准对齐（可选） #

部分Emoji字符的基线和普通文本不同，可额外添加vertical-align确保内容垂直居中，同时保持div高度贴合：

.divText {
  border: solid;
  font-size: 50px;
  width: 70px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block; /* 确保行高和对齐规则生效 */
}

问题根源 #

你之前设置了固定height:50px，但Emoji这类特殊字符的渲染高度和普通文本有差异，再加上div默认的行高（通常大于1），导致div高度无法精准贴合内容。移除固定高度并调整行高后，div会根据内容自动收缩到合适高度。

内容的提问来源于stack exchange，提问作者eug100