在这个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;
字符串
我不明白为什么会这样?
我不知道该怎么办。
2条答案
按热度按时间jaxagkaj1#
这里的
<Link>
将呈现<a>
元素。<a>
元素默认为内联元素。这意味着垂直margin
不会在它们上显示任何行为。要使垂直margin
工作,请考虑覆盖它们的默认值display: inline
。例如,您可以将display: inline-block
应用为display: inline
的近似等效值。个字符
gfttwv5a2#
如果我也将父div设置为
display: flex
,就可以了。谢谢!字符串