如何将h2标签内的span文本框修改为矩形形状？

问题根源 #

你当前代码无法得到规整矩形，核心是三个样式冲突：

• 同时给span设置了固定height: 44px和padding: 2rem，默认盒模型下内边距会叠加在宽高之外，2rem的上下内边距远大于44px，直接把矩形撑得变形
• 两个span之间的<br>标签、inline-block元素的默认特性，会在两个色块之间留出多余的空白间隙
• 没有设置盒模型规则，宽高计算不符合预期，搭配偏移属性时容易出现错位

修正后完整代码 #

CSS部分 #

h2 {
  position: fixed;
  top: 20rem;
  left: 11rem;
  text-align: right;
  font-size: 0; /* 清除inline-block和br带来的默认间隙 */
}

h2 span {
  background-color: #556272;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-style: normal;
  box-sizing: border-box; /* 内边距计入固定宽高，不额外撑大盒子 */
  padding: 0 1rem; /* 只保留左右内边距，避免撑破固定高度 */
  line-height: 44px; /* 匹配高度实现文字垂直居中 */
}

h2 span:first-child {
  width: 200px;
  height: 44px;
  font-size: 20px;
}

h2 span:last-child {
  transform: translate(-1rem, -1rem);
  width: 200px;
  height: 44px;
  font-size: 15px;
}

HTML部分 #

你原有的HTML结构不需要改动，直接复用即可：

<h2>
  <span>Web</span> <br />
  <span>Development</span>
</h2>

关键调整点 #

• 新增box-sizing: border-box，固定宽高会把内边距、边框算在内部，保证矩形尺寸严格是你设置的200px*44px
• 移除了会撑破高度的上下内边距，改用行高实现文字垂直居中，只保留左右内边距避免文字贴边
• 给h2设置font-size:0清除标签换行、br带来的默认间隙，再在span上单独设置字号，不会影响文字显示
• 保留了你原本写的错位偏移效果，最终渲染结果和预期一致

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