这里的<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/>);

个字符

如果我也将父div设置为display: flex，就可以了。谢谢！

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

const Header = () => {
    return (
        <div className="flex 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;

字符串