skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

    It worked if I also made the parent div display: flex. Thank you!

    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;
    

  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search