html - 如何防止图像的边距被点击？

Question

如何在不影响页面布局的情况下从可点击区域移除图像的边距？

#logo{
width: auto;
min-height: 80px;
margin: 30px;
height: auto;
box-sizing: border-box;
text-aligh:center;
}
.img1 {
width: 200px;
height: 105px;
}
.img2 {
width: 200px;
height: 105px;
margin-left: 15px;
}
.img3 {
width: 200px;
height: 105px;
margin-left: 15px;
}

<div id="logo"><a href="M"><img class="img1" src="Photos/m.png"/></a>
<a href="U"><img class="img2"src="Photos/u.png" alt="U"/></a>
<a href="/#"><img class="img3" src="Photos/p.png" alt="P"/></a>
</div>

15px在左下站点img2和img3可以点击。

Answer 1

将边距放在 A 标签而不是 IMG 上:

#logo{
  width: auto;
  min-height: 80px;
  margin: 30px;
  height: auto;
  box-sizing: border-box;
  text-align:center;
}

.img1 {
  width: 200px;
  height: 105px;
}

.img2 {
  width: 200px;
  height: 105px;
}

.a2, .a3 {
  margin-left: 15px;
}

.img3 {
  width: 200px;
  height: 105px;
}

<div id="logo"><a href="M"><img class="img1" src="Photos/m.png"/></a>
<a class="a2" href="U"><img class="img2"src="Photos/u.png" alt="U"/></a>
<a class="a3" href="/#"><img class="img3" src="Photos/p.png" alt="P"/></a>
</div>