Tailwind CSS实现产品卡片时图片顶部出现黑线如何解决

使用Tailwind CSS开发产品卡片时，图片调整到预期位置后，卡片/图片最顶部始终存在一条黑线，移除img标签上的所有相关样式后黑线依然存在。
异常效果参考：

对应复现代码：

import React from 'react'
import coffeemerch from "../images/Coffee-Product photo.jpg";

export default function Products() {
  return (
    <div className="card w-96 bg-base-100 shadow-xl top-40 left-32">
      <figure> 
        <img className="h-80 justify-center" src={coffeemerch} alt="coffee-product" />
      </figure>
      <div className="card-body">
        <h2 className="card-title text-red-800">Medium Roast</h2>
      </div>
    </div>
  );
}

黑线由两个默认样式叠加导致：

• 浏览器内置样式默认给<figure>标签设置了上下外边距
• <img>默认是行内元素，会和父容器基线之间预留数像素的下沉间隙，两者叠加后就会在图片顶部显示出一条黑线

任选一种即可解决问题：

• 方案1：清除figure默认外边距，同时把img转为块级元素消除基线间隙，顺便修正img上无效的居中类：

  <figure className="m-0"> 
    <img className="block h-80 mx-auto" src={coffeemerch} alt="coffee-product" />
  </figure>
  

  注：justify-center是flex/grid容器的生效属性，直接加在img上没有任何居中效果，块级图片水平居中用mx-auto（左右自动外边距）实现即可
• 方案2：如果不需要figure的语义化标签作用，直接把外层figure替换为普通div标签，就能直接避开浏览器给figure预设的默认样式。
• 方案3：全局样式中统一重置figure、img的默认边距和显示属性，避免后续开发出现同类间隙问题。

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