svg in the div still showing when the container height is 0

hey folks this is my code

<header className={`sticky top-0 z-[3] bg-white`}>
            <div className="flex justify-between px-16 py-4 h-0 bg-gradient-black-green">
                <div className="flex gap-4 items-center">
                    <span className="text-white">Contact Us: </span>
                    <Link to='tel:+918619641968' className="text-black"><Phone className="h-[1.5em]" /></Link>
                    <Link to='mailto:buy1gram@gmail.com' className="text-black"><Email className="h-[1.5em]" /></Link>
                    <Link to='/' className="text-black"><Download className="h-[1.5em]" /></Link>
                </div>
                <div className="flex items-center gap-4">
                    <span className="text-black">Follow Us: </span>
                    <Link to='' className="text-black"><Instagram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Facebook className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Telegram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Linkedin className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Youtube className="h-[1.5em] w-auto" /></Link>
                </div>
            </div>
        </header>

<header className={`sticky top-0 z-[3] bg-white`}>
            <div className="flex justify-between px-16 py-4 h-0 bg-gradient-black-green">
                <div className="flex gap-4 items-center">
                    <span className="text-white">Contact Us: </span>
                    <Link to='tel:+918619641968' className="text-black"><Phone className="h-[1.5em]" /></Link>
                    <Link to='mailto:buy1gram@gmail.com' className="text-black"><Email className="h-[1.5em]" /></Link>
                    <Link to='/' className="text-black"><Download className="h-[1.5em]" /></Link>
                </div>
                <div className="flex items-center gap-4">
                    <span className="text-black">Follow Us: </span>
                    <Link to='' className="text-black"><Instagram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Facebook className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Telegram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Linkedin className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Youtube className="h-[1.5em] w-auto" /></Link>
                </div>
            </div>
        </header>

i have set the height of div to 0 still the div content are showing why is it happening i have attached image when the div height is 0 and when its not

5 Replies

Chris Bolson•13mo ago

Its due to the padding on the div

Aditya Kirad•13mo ago

i removed the padding still its showing

Chris Bolson•13mo ago

Now try adding overflow-hidden to the div

Aditya Kirad•13mo ago

i know about that but can we use that with transition

Chris Bolson•13mo ago

What is the issue that you have with transition?

Gaming

Programming

svg in the div still showing when the container height is 0