页面标题后出现多余空白是什么原因？如何才能将其删除？

解决方案 #

• 先排查盒模型异常：按下F12打开浏览器开发者工具，选中出现空白的标题元素，查看「盒模型」面板，确认是否是标题自身的padding-right、margin-right，或是父容器的右内边距导致的多余空白，对应修改对应CSS属性即可。
• 排查不可见空白字符：如果样式无异常，大概率是标题文本末尾带了不可见空白，比如全角空格、零宽空格、换行符等，可在控制台执行console.log(encodeURIComponent(你的标题文本变量))，如果输出结果末尾有%C2%A0、%E3%80%80这类编码，就是存在隐形空白，用字符串方法清理即可：

  // 清理首尾所有空白字符（包括不可见特殊空白）
  const cleanTitle = rawTitle.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')
  

• 排查伪元素占位：查看开发者工具中标题元素的子节点，是否存在你未感知到的::after伪元素，部分样式框架会默认给标题类元素加后缀伪元素，没写内容但设置了固定宽度也会产生空白，覆盖::after的content: none即可解决。
• 排查行内元素默认间隙：如果标题是行内/行内块元素，和后续元素之间的HTML代码存在换行、空格，浏览器会默认渲染为一个空格间隙，解决方法要么把两个相邻元素的HTML标签写在同一行，要么给父元素设置font-size: 0，再单独给标题、后续元素设置对应字号。
• 排查flex布局异常：如果标题所在父容器是flex布局，检查是否设置了gap属性、或是justify-content: space-between这类排版属性把元素撑开导致的视觉空白，对应调整flex属性即可。

问题对应场景截图：

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