如何消除Bootstrap布局中元素间的垂直间隙？

问题根源 #

你当前的HTML结构里，标题、图片、描述是三个独立的列元素。在桌面端，标题和图片会排在同一行，描述被挤到下一行左侧。由于图片占据了对应行的高度，浏览器会为该行预留空间，导致标题和描述之间出现多余的垂直间隙。

修复方案 #

调整结构，把标题和描述放在同一个左侧列容器内，图片单独放在右侧列，这样左侧的标题和描述就能自然紧凑排列，不受图片高度影响：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container mt-lg-4">
  <div class="row">
    <!-- 左侧列：包含标题与描述 -->
    <div class="col-sm-6">
      <p class="mt-lg-5 mt-sm-1 h1"><strong>Find perfect product for your skin</strong></p>
      <div id="description">
        PrimerAI will examine your skin and find the perfect product for your skin's needs.
      </div>
    </div>
    <!-- 右侧列：单独放置图片 -->
    <img src="https://via.placeholder.com/200" class="col-sm-6" />
  </div>
</div>

额外优化建议 #

• 若要让左右列内容垂直居中对齐，可给row添加align-items-center类。
• 如需微调标题和描述的间距，可给标题添加mb-3（或其他margin-bottom类），比如<p class="mt-lg-5 mt-sm-1 h1 mb-3"><strong>...</strong></p>。

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