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

Question

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"><img class="img1" src="Photos/m.png"/>
<img class="img2"src="Photos/u.png" alt="U"/>
<img class="img3" src="Photos/p.png" alt="P"/>
</div>
15px on the lower left site img2 and img3 can be clicked.

Answer 1

Put the margin to the A tag instead of 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"><img class="img1" src="Photos/m.png"/>
<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>

Answer 2

This simplifies your CSS declarations a bit too. In lieu of setting the margin as you had it, this sets it on <a> elements.
#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">
<img class="img" src="Photos/m.png"/>
<img class="img"src="Photos/u.png" alt="U"/>
<img class="img" src="Photos/p.png" alt="P"/>
</div>