如何让导航栏logo的可点击区域与logo自身尺寸保持一致

问题原因 #

两个异常表现的核心原因如下：

1. 悬浮区域超出logo范围：img默认是行内替换元素，底部存在约3px的基线留白，同时你给img设置了width: 50%的相对宽度，作为父元素的a标签会自动适配img尺寸，导致可点击范围超出logo实际大小。
2. 移动端logo占满汉堡菜单前空间：flex布局下，a标签作为nav的直接子元素，默认允许收缩/拉伸，没有固定宽度约束时会自动填充剩余可用空间。

修复方案 #

修改后的CSS代码如下：

* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

/* 新增logo包裹a标签的样式 */
nav a {
  width: 100px; /* 可根据你的logo实际尺寸调整数值 */
  flex-shrink: 0; /* 禁止flex布局下自动收缩 */
}

nav img {
  display: block; /* 清除行内元素基线留白 */
  width: 100%; /* 撑满父元素a的宽度 */
  padding: 10px 0;
}

.fa-bars {
  margin-right: 20px;
}

HTML代码无需修改，调整nav a的width数值即可适配你自己的logo尺寸。

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