为什么 Tailwindcss 的“mb-3”类不能与 next/link 一起使用？

Question

在这个 Next.js 组件中，在突出显示的行中，Tailwindcss 的“mb-3”类在 Y 方向上没有效果，但是如果我们使用“m-3”，它在 y 方向上也没有效果，但有一个对 X 方向的影响。

import Image from "next/image";
import Link from "next/link";

const Header = () => {
    return (
        <div className="bg-blue-200 w-1/5 h-screen fixed px-12 py-9">
            <Link href="/" className="mb-3">
                <Image
                    src="/logo.png"
                    alt="Twizlr"
                    width={100}
                    height={0}
                    priority
                    className="h-auto"
                />
            </Link>

            <nav className="flex items-center justify-center h-full bg-yellow-200"></nav>
        </div>
    );
};

export default Header;

我不明白为什么会发生这种情况？

我根本不知道该怎么办。

Answer 1

这里的

<Link>

将渲染一个

<a>

元素。

<a>

元素默认是内联元素。这意味着垂直

margin

不会对它们表现出任何行为。要使垂直

margin

正常工作，请考虑覆盖其默认

display: inline

值。例如，您可以将

display: inline-block

用作

display: inline

的近似等效项。

const Image = props => <img {...props}/>
const Link = props => <a {...props}/>

const Header = () => {
  return (
    <div className="bg-blue-200 w-1/5 h-screen fixed px-12 py-9">
      <Link href="/" className="mb-3 inline-block">
        <Image
            src="https://picsum.photos/100/100"
            alt="Twizlr"
            width={100}
            height={0}
            priority
            className="h-auto"
        />
      </Link>
      <nav className="flex items-center justify-center h-full bg-yellow-200"></nav>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<Header/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div id="app"></div>