HTML/CSS问题：图片指定区域外仍可点击

问题出在你给.Logo设置的padding-left:40%上——padding是元素的内边距，属于图片自身的盒模型范围，而包裹图片的<a>标签会覆盖整个图片的盒模型区域，包括左边的padding部分，所以点击这个padding区域也会触发跳转。

给你几个简单的解决思路：

方案1：把间距加到父元素上 #

给包裹图片的<a>标签或者#header加左侧间距，去掉图片的padding：

#header a {
  margin-left: 40%;
  display: inline-block; /* 让margin生效 */
}
.Logo {
  display: flex;
  justify-content: center;
  max-width: 100px;
  max-height: 100px;
  /* 移除padding-left */
}

方案2：用margin-left替代padding-left #

margin是元素外部间距，不会算进图片的可点击区域：

.Logo {
  display: flex;
  justify-content: center;
  max-width: 100px;
  max-height: 100px;
  margin-left: 40%; /* 替换原来的padding-left */
}

方案3：限制<a>标签的点击范围 #

让<a>只包裹图片的实际尺寸，把间距单独设置：

#header a {
  display: inline-block;
  width: fit-content; /* 让a的宽度适配图片 */
  margin-left: 40%;
}
.Logo {
  display: flex;
  justify-content: center;
  max-width: 100px;
  max-height: 100px;
}

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