In this Next.js component, in the highlighted line "mb-3" class of Tailwindcss has no effect in the Y direction but if we use "m-3" it also does not have an effect in the y direction but has an effect on the X direction.
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;
I can't get it why is this happening?
I don't know what to do at all.
The <Link>
here would render an <a>
element. <a>
elements are inline elements by default. This means that vertical margin
does not exhibit any behavior on them. To have the vertical margin
work, consider overriding their default display: inline
value. For example, you could apply display: inline-block
as a close equivalent to 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>