类名为icon的div内h3元素未被自动容纳的样式问题咨询

问题原因 #

• h3是HTML默认的标题块级元素，浏览器会给这类元素预置默认的上下margin外边距，常规默认值约为1em，这部分额外间距会让h3的总占用高度远高于文字本身的高度。
• 你给父容器.icon设置了固定高度height:20px，没有做溢出限制的前提下，子元素h3的总高度（内容高度+上下margin）超过20px时，自然就会溢出父容器，视觉上呈现出没有被容纳的效果。
• 你当前把黄色背景设置在h3元素而非父容器上，溢出的h3部分也会显示黄色背景，进一步放大了这个视觉差异。

修复方案 #

如果要实现h3完全容纳在.icon容器内的效果，只需要清除h3的默认外边距，同时调整行高适配父容器高度即可，参考代码如下：

/* 方案1：背景色保留在h3上 */
.icon {
  width: 50px;
  height: 20px;
}
.icon h3 {
  margin: 0; /* 清除浏览器默认外边距 */
  line-height: 20px; /* 行高和父容器高度对齐，实现文字垂直居中 */
  font-size: 14px; /* 按需调整字体大小，避免文字过宽/过高溢出 */
  background-color: yellow;
}

/* 方案2：背景色改到父容器上，更符合你要做图标背景的需求 */
.icon {
  width: 50px;
  height: 20px;
  background-color: yellow;
}
.icon h3 {
  margin: 0;
  line-height: 20px;
  font-size: 14px;
}

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