CSS Padding Over Lap-CodePudding

What I want:
I want the img padding to be 0, which it is, but I also dont want it to include the a tags padding. How can I make it so that the absolute padding on the img tag is 0? Without the a tags padding adding to it.

CSS:

#navbar ul li a img {
    width: 7vw;
    height: 2.35vw;
    padding: 0;
}

#navbar ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #A9A9A9;
    padding: .5vw .6vw;
    font-size: 1.35vw;
    font-weight: bolder;
    font-family: Arial;
}

HTML:

        <div id="navbar">
            <ul>
                <li>
                    <a href="https://rb.gy/5o6pmo" title="Discord">
                        <img src="https://rb.gy/trhqyb" alt="FMW Logo">
                    </a>
                </li>
                <li>
                    <a href="index.html" title="home">Home</a>
                </li>
                <li>
                    <a href="about.html" title="About">About</a>
                </li>
                <li>
                    <a href="support.html" title="Support">Support</a>
                </li>
                <li>
                    <a href="events.html" title="Events">Events</a>
                </li>
                <li>
                    <a href="peaks.html" title="Sneak Peaks">Sneak Peaks</a>
                </li>
                <li>
                    <a href="videos.html" title="Videos">Videos</a>
                </li>
                <li>
                    <a href="updates.html" title="Change Log">Change Log</a>
                </li>
            </ul>
        </div>

CodePudding user response：

You could achieve this result with this:

#navbar ul li:first-child a {
  padding:0;
}

Fiddle