html - 如何防止图片的页边空白被点击？

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

#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>

可以单击左下方站点img2和img3上的15px。

最佳答案

这也简化了CSS声明。代替按需设置边距，它在<a>元素上进行设置。

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


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

a:not(:first-of-type) {
  margin-left: 15px;
}

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