CSS 重叠填充

Question

我想要的：
我希望 img 填充为 0，但我也不希望它包含 a 标记填充。我怎样才能使 img 标签上的绝对值 padding 为 0？没有添加 a 标签填充。

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>

Answer 1

您可以通过以下方式获得此结果：

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

Fiddle

CSS 重叠填充

CSS Padding Over Lap

html

css

image

padding

navbar