如何消除Tailwind CSS网格布局中行之间的间距？

我使用Tailwind CSS编写了一段构建简单两列网格的代码，其中图片跨占2行。代码如下：

<div class="bg-purple-300 container mx-auto">  
  <div class="grid grid-cols-2">
    <h1 class="text-7xl text-black">Hello world!</h1>
    <img src="../public/images/Filip.jpg" class="row-span-2" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis eget ex ut semper. Suspendisse vel hendrerit tortor, ut imperdiet metus. Vivamus sed nunc bibendum libero tincidunt luctus vel a libero. Donec sit amet pellentesque quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sodales est id lectus laoreet vehicula. Curabitur eget sodales quam. Curabitur eu metus lectus. Aliquam maximus, dolor at vulputate molestie, mi erat commodo purus, id pharetra lorem nisi in massa.1
    </p>
  </div>
</div>

实际输出效果：

我希望标题与段落之间的间距为0，请问该如何实现？

解决方案 #

标题和段落的间距来自两部分：一是<h1>、<p>标签自带的浏览器默认外边距，二是网格布局的行间距（若有设置）。可以通过以下两种方式消除间距：

方法1：将标题与段落放入同一网格项（推荐） #

把<h1>和<p>包裹在同一个容器中作为单个网格项，直接移除两者的内外边距：

<div class="bg-purple-300 container mx-auto">
  <div class="grid grid-cols-2">
    <div>
      <h1 class="text-7xl text-black mb-0">Hello world!</h1>
      <p class="mt-0">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis eget ex ut semper. Suspendisse vel hendrerit tortor, ut imperdiet metus. Vivamus sed nunc bibendum libero tincidunt luctus vel a libero. Donec sit amet pellentesque quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sodales est id lectus laoreet vehicula. Curabitur eget sodales quam. Curabitur eu metus lectus. Aliquam maximus, dolor at vulputate molestie, mi erat commodo purus, id pharetra lorem nisi in massa.1
      </p>
    </div>
    <img src="../public/images/Filip.jpg" class="row-span-2" />
  </div>
</div>

方法2：保持独立网格项，消除间距 #

如果要保留<h1>和<p>作为独立网格项，需同时消除网格行间距和标签自身的外边距：

<div class="bg-purple-300 container mx-auto">
  <div class="grid grid-cols-2 gap-y-0">
    <h1 class="text-7xl text-black mb-0">Hello world!</h1>
    <img src="../public/images/Filip.jpg" class="row-span-2" />
    <p class="mt-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis eget ex ut semper. Suspendisse vel hendrerit tortor, ut imperdiet metus. Vivamus sed nunc bibendum libero tincidunt luctus vel a libero. Donec sit amet pellentesque quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. In sodales est id lectus laoreet vehicula. Curabitur eget sodales quam. Curabitur eu metus lectus. Aliquam maximus, dolor at vulputate molestie, mi erat commodo purus, id pharetra lorem nisi in massa.1
    </p>
  </div>
</div>

关键类说明：

• mb-0：移除元素底部外边距
• mt-0：移除元素顶部外边距
• gap-y-0：移除网格布局的行间距（仅方法2需要）

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