Tailwind CSS的mb-3类在Next.js的next/link中无效问题排查

问题原因 #

Next.js的<Link>组件默认渲染为原生<a>标签，属于行内元素（inline）。CSS规范中，行内元素的垂直方向margin（margin-top/margin-bottom）不会影响布局，只有水平方向的margin-left/margin-right能生效，这就是你遇到Y轴margin无效果、X轴正常的根本原因。

解决办法 #

1. 给Link添加块级元素类

直接给<Link>加上block类，将其转为块级元素，垂直margin即可正常生效：

<Link href="/" className="mb-3 block">
  <Image
    src="/logo.png"
    alt="Twizlr"
    width={100}
    height={0}
    priority
    className="h-auto"
  />
</Link>

2. 用块级容器包裹Link

如果不想修改Link的显示类型，可以给它套一个<div>等块级容器，给容器设置margin：

<div className="mb-3">
  <Link href="/">
    <Image
      src="/logo.png"
      alt="Twizlr"
      width={100}
      height={0}
      priority
      className="h-auto"
    />
  </Link>
</div>

3. 改用inline-block显示类型

若需要保留行内特性（比如和其他元素在同一行）同时支持垂直margin，可给Link添加inline-block类：

<Link href="/" className="mb-3 inline-block">
  <Image
    src="/logo.png"
    alt="Twizlr"
    width={100}
    height={0}
    priority
    className="h-auto"
  />
</Link>

内容的提问来源于stack exchange，提问作者Ayan Das Karmakar