How to prevent an image's margin from being clickable?

How can I remove the image's margin from the clickable region, without interfering in the layout of the page?

#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 on the lower left site img2 and img3 can be clicked.

#html #css