这个问题我之前也碰到过！本质上是**Bootstrap的标题（<h1>）和段落（<p>）自带默认外边距（margin）**在搞鬼——你之前设置padding-top:0没用，是因为真正导致视觉间距不等的不是padding，而是这些预设的margin值。

下面给你几个实用的解决思路：

方法1：用Bootstrap内置工具类消除默认margin #

Bootstrap自带了一套间距工具类，直接给<h1>和<p>加上就能快速去掉它们的默认上下外边距：

<div class="row justify-content-between row-spacing">
  <div class="col-sm-12 col-md-4 bg-orange">
    <h1 class="mt-0 mb-0">Word1<br>Word 2<br>Word 3</h1>
  </div>
  <div class="col-sm-12 col-md-7 bg-orange">
    <p class="content-text mt-0 mb-0">Text text text text text text text text text text text text text text text text text text text text text </p>
  </div>
</div>

• mt-0：强制设置顶部外边距为0
• mb-0：强制设置底部外边距为0

另外别忘了检查你自定义的row-spacing类，确保它的上下padding/margin是对称的，比如：

.row-spacing {
  padding: 1.5rem 0; /* 上下padding保持相同数值 */
  margin: 0;
}

方法2：统一列的内边距 #

如果列本身的padding设置不一致，也会造成视觉上的上下间距不等。可以给两个列都加上Bootstrap的py-*类（py是padding-y的缩写，专门控制上下padding），比如py-3：

<div class="col-sm-12 col-md-4 bg-orange py-3">...</div>
<div class="col-sm-12 col-md-7 bg-orange py-3">...</div>

或者用自定义CSS强制统一：

.bg-orange {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /* 替换成你需要的具体数值 */
}

方法3：排查全局样式干扰 #

如果上面的方法都没效果，打开浏览器开发者工具（F12），选中对应的<h1>和<p>元素查看盒模型——说不定是你自己写的全局样式（比如给所有h1加了额外的margin-top）在干扰，找到对应的样式后直接覆盖就行。

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