HTML中如何缩小表格内h3与p标签的间距？图片文字排版优化

问题核心原因 #

h3、p这类块级标签的浏览器默认样式自带上下外边距（margin），这是两个标签间距过大的根源，全程不需要引入外部CSS，仅靠行内样式就能完全控制排版效果。

直接缩小h3与p标签间距的操作 #

• 给h3标签补全行内样式，清除默认上下margin，单独设置和下方p标签的垂直间距：写法为<h3 align="center" style="font-size:20px; margin:0 0 4px 0; line-height:1.2;">WELCOME</h3>。这里的4px就是h3和下方p的间距数值，数值越小间距越近，可根据需求随意调整；搭配line-height:1.2是为了避免默认行高过大拉宽视觉间距，调整精度更高
• 给p标签补全行内样式，清除自带的默认上下margin，避免额外留白：写法为<p align="center" style="margin:0; font-size:14px; line-height:1.2;">Jinho</p>

更灵活的图片叠加多段文字实现方案 #

当前用table实现叠加的方式排版灵活性差，换用定位逻辑实现，所有样式全写在行内，完全支持多段文字间距单独调节、不同段落配置不同字体的需求：

1. 外层容器设置相对定位，作为整个叠加区域的位置基准，行内样式写style="position:relative; width:600px; margin:0 auto;"
2. 图片直接放在容器最底层，不需要额外包裹，加display:block可以清除图片底部默认的留白缝隙
3. 文字层设置绝对定位，直接叠在图片上层，行内样式写style="position:absolute; left:0; right:0; top:30%; text-align:center;"，这里的top:30%可以直接调整整组文字在图片上的垂直位置
4. 组内每一段文字单独配置行内样式，分别设置字号、字体、上下间距，不受table布局的限制

优化后的完整可运行代码：

<div style="position:relative; width:600px; margin:0 auto;">
  <!-- 底层图片 -->
  <img src="bimage/box.jpg" alt="box" style="width:100%; display:block;">
  <!-- 上层叠加文字层 -->
  <div style="position:absolute; left:0; right:0; top:30%; text-align:center;">
    <h3 style="font-size:20px; margin:0 0 6px 0; line-height:1.2; font-family: 'Microsoft Yahei', sans-serif;">WELCOME</h3>
    <p style="margin:0; font-size:14px; line-height:1.2; font-family: Arial, sans-serif;">Jinho</p>
  </div>
</div>

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