Href area too, big, tried inline-block - html

Question

so my problem is, that I can't make href area image-sized. I still get white border up, left, right of my image, I tried display: inline-block, without any luck. This is my CSS (I know it looks pretty awful):
div.gallery {
margin: 1%;
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000;
box-shadow: 10px 10px 25px #000;
float: left;
min-width: 180px;
width: 23%;
}
div.gallery a {
background-color: red;
display: inline-block !important;
}
div.gallery img {
display: block;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a href="myphoto.jpg">
<img src="http://dummyimage.com/200x150&text=myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
<div class="gallery">
<a target="_blank" href="myphoto.jpg">
<img src="http://dummyimage.com/200x150&text=myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
EDIT: Thanks for answer, but I think I could be a little unclear:
I made a gallery, that displays 4 imgs in a row, no matter if the screen resolution is hd, or 1024x768. It's responsive. in div.gallery img I set width to be 100% (which I forgot to add here). My problem is, that I have something like this when setting on the images: white border caused by a href.

Answer 1

The a inline-block element will not expand if its contents have no dimension. Once I set a dimension to the img than it works.
img {
width:180px;
height:100px;
}
div.gallery {
margin: 1%;
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000;
box-shadow: 10px 10px 25px #000;
float: left;
min-width: 180px;
width: 23%;
}
div.gallery a {
background-color: red;
display: inline-block;
}
div.gallery img {
display:inline-block;
}
div.desc {
padding: 15px;
text-align: center;
}
<div class="gallery">
<a href="myphoto.jpg">
<img src="myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>
<div class="gallery">
<a target="_blank" href="myphoto.jpg">
<img src="myphoto.jpg" alt="" />
</a>
<div class="desc">XXX</div>
</div>

Answer 2

you can use below code for solve your problem.
div.gallery {
margin: 1%;
-webkit-box-shadow: 5px 5px 15px #000;
-moz-box-shadow: 5px 5px 15px #000;
box-shadow: 5px 5px 15px #000;
float: left;
min-width: 160px;
width: 25%;
}
div.gallery a{
width: 100%;
background-color: yellow;
display: inline-block !important;
}
div.gallery img {
display:block;
position: absolute;
}
div.desc {
padding: 20px;
text-align: center;
}
<div class="gallery">
<a href="myphoto.jpg">
<img src="myphoto.jpg" alt="" height="100px" width="100%" />
<div class="desc">AAA</div>
</a>
</div>
<div class="gallery">
<a target="_blank" href="myphoto.jpg">
<img src="myphoto.jpg" alt="" height="100px" width="100%" />
<div class="desc">BBB</div>
</a>
</div>

Answer 3

There's a really simple fix for this.
Simply wrap your a around the div too, then set, on your images: height="48px" width="100%" position: absolute;
Finally, set the width of your anchors to 100%;
Let me know if you have any questions. Thanks
https://jsfiddle.net/v45k8ojk/2/

Answer 4

Try changing
<img src="myphoto.jpg" alt="" />
to
<img src="myphoto.jpg" alt="image1">
Image tag does not require end of the tag.