Href area too, big, tried inline-block

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.

Consider making a code snippet or a jsfiddle to better illustrate your problem — A. W., Sep 08 '17 at 19:15
When I'm making a jsfiddle, there's no white border around image, also when I copy all the code to make a simple webpage (not in wordpress), everything works fine. I'm very confused right now... — MikeCKD, Sep 08 '17 at 19:24
Your code on its own here seems buggy (image not resized) . For the borders, you might need to reset them on those specific images probably inherited from other rules or heavier selector. it can also be shadows and not borders. you'll need to dig in your code about each rules applied to links or image. Finally, i would eventually suggest to use figure and figcaption and set links as block elements. https://codepen.io/anon/pen/BdXLvL — G-Cyrillus, Sep 09 '17 at 10:36

score 0 · Answer 1 · answered Sep 08 '17 at 19:25

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>

sdr981 · Answer 2 · 2017-09-08T19:41:42.723

0

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/

edited Sep 08 '17 at 19:41

answered Sep 08 '17 at 19:26

sdr981

405
4
15

score 0 · Answer 3 · answered Sep 08 '17 at 19:32

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>

score -2 · Answer 4 · answered Sep 08 '17 at 19:20

-2

Try changing

<img src="myphoto.jpg" alt="" />

to

<img src="myphoto.jpg" alt="image1">

Image tag does not require end of the tag.

answered Sep 08 '17 at 19:20

NCode

78
9

2

It does not require it, but both are accepted. See https://stackoverflow.com/questions/23890716/why-is-the-img-tag-not-closed-in-html for more information. Generally, what you have suggested would be more widely used, however. – sdr981 Sep 08 '17 at 19:33

Href area too, big, tried inline-block

4 Answers4