如何让a标签内的img标签不受父级padding影响保持padding为0

你遇到的现象本质不是父元素padding和img的padding叠加，父元素<a>的padding属于自身的内边距，是子元素img外的留白空间，和img自身的padding属性完全无关，所以给img设置padding:0无法抵消这部分间距。

以下是几种可实现需求的方案： #

方案1：直接清除包含图片的a标签的padding（兼容性好优先推荐） #

给放置logo的li新增自定义类，针对性清除该a标签的padding，不影响其他文本导航项样式，所有浏览器都支持：

1. 修改HTML代码，给logo对应的li加类：

<li class="nav-logo">
    <a href="https://rb.gy/5o6pmo" title="Discord">
        <img src="https://rb.gy/trhqyb" alt="FMW Logo">
    </a>
</li>

2. 新增CSS规则：

#navbar ul li.nav-logo a {
    padding: 0;
}

方案2：使用CSS :has()选择器，无需修改HTML #

如果不想修改HTML结构，可以用:has()选择器自动匹配内部包含img的a标签清除padding，主流新版本浏览器均支持：

#navbar ul li a:has(img) {
    padding: 0;
}

方案3：用负margin抵消父元素padding（无需修改其他代码） #

如果a标签的padding需要保留（如交互样式依赖该值），可以给img设置负margin抵消父元素的内边距：

#navbar ul li a img {
    width: 7vw;
    height: 2.35vw;
    padding: 0;
    /* 负边距值和父元素a的padding值对应即可 */
    margin: -.5vw -.6vw;
}

方案4：选中首个导航项清除padding（仅适合导航顺序固定场景） #

如果你的logo永远放在导航第一个位置，无需修改HTML，直接选中首个li的a清除padding：

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

内容的提问来源于stack exchange，提问作者killrebeest