HTML/CSS中行内与块级元素混淆导致行内分数换行的修复

这个渲染问题本质不是CSS属性设置不当，而是HTML解析规则带来的：

• <p>标签的合法内容范围仅包含短语内容，也就是文本节点、行内级元素，不允许嵌套<div>这类块级元素
• 浏览器解析代码时，一旦在<p>内部检测到块级元素，会触发容错逻辑：自动在块元素的位置提前闭合当前的<p>标签。原本处于同一文本流的“The fraction”文本、分数元素、后续文本会被拆到多个独立的块级盒子里，最终表现为分数被挤到单独一行的强制换行效果。

全程保留<p>作为段落容器，通过标签替换+配套CSS调整，就能实现预期的行内嵌入效果，不需要靠<div>模拟段落标签：

1. HTML结构调整 #

把原本嵌在段落内的所有<div>替换为<span>，匹配<p>的内容模型要求，从根源上避免触发浏览器的自动闭合逻辑：

<p style="text-indent: 2em;">
The fraction
<span class="fraction">
  <span class="frtop">1</span>
  <span class="frbottom">20000</span>
</span>
equals to 0.00005.
</p>

2. 配套CSS规则补全 #

因为<span>默认是纯行内元素，直接替换标签会丢失原来div的块级表现，需要补充样式还原分数的视觉效果，同时处理首行缩进的继承问题：

.fraction {
  /* 作为整体嵌入文本流，和相邻文本垂直居中对齐 */
  vertical-align: middle;
  display: inline-block;
  /* 清除从父级<p>继承的首行缩进，避免分数内部文字错位 */
  text-indent: 0;
}
.frtop, .frbottom {
  /* 还原原div的块级堆叠特性，让分数上下两层正常纵向排列 */
  display: block;
  text-align: center;
  /* 补充小范围内边距，避免文字和分数线贴边 */
  padding: 0 0.2em;
}
.frbottom {
  /* 用currentColor让分数线颜色和当前文本颜色保持一致，视觉更协调 */
  border-top: 1px solid currentColor;
}

效果说明 #

• 段落本身的2em首行缩进可以正常生效，不会被嵌入的分数干扰
• 分数会作为整体和前后文本保持在同一行，通过垂直居中对齐匹配文本基线，和文字的视觉位置协调
• 分数内部的上下两层数字居中对齐，分数线正常显示，不会因为继承父级的首行缩进出现文字错位

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