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:[email protected]' 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:[email protected]' 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