link is under the image

Question

I have a problem using link and img because there is a small space in link.

HTML:

<div class="gridgallery">
    <figure><a href="../img/1-1.jpg" data-caption="Golden Gate Bridge">
    <img src="../img/thumbs/1-1.jpg"></a></figure>
</div>

CSS:

.gridgallery figure {
    background: #fff;
    margin:0px;
}
.gridgallery figure img {
    width: 100% !important;
    max-width:100%;
    opacity: 0.95;
}
#gallerytitle {
    width:950px;
    max-width:100%;
    margin:0px auto 15px auto;
}

DEMO: https://jsfiddle.net/paolobasso99/33h4ypab/1/

WHY????

No, if I put { display: block; } the a will became height like the img but the small space still stay there — , Jun 01 '15 at 11:46

score 0 · Accepted Answer · answered Jun 01 '15 at 11:49

0

Try like this: Demo

.gridgallery figure img {
    width: 100% !important;
    max-width:100%;
    opacity: 0.95;  
     display:block;
}

answered Jun 01 '15 at 11:49

G.L.P

7,119
5
25
41

Thank you, the problem is {display:block;} in {.gridgallery figure img}. – Jun 01 '15 at 12:03

score 0 · Answer 2 · edited Jun 01 '15 at 15:29

0

Try this:

.gridgallery figure img {
    width: 100% !important;
    max-width:100%;
    opacity: 0.95;
    display:block;
}

edited Jun 01 '15 at 15:29

Edd

3,724
3
26
33

answered Jun 01 '15 at 11:58

vicky

695
5
15

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Please check the approved answer in this question: stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag

Set the attribute vertical-align:bottom of the image (no need to change height/width or display:block, ...)

edited May 23 '17 at 12:06

Community

1
1

answered Jun 01 '15 at 12:04

Philipp

10,240
8
59
71

No, {display:block;} is the right way because I have to create a hover effect for a fluid gallery and {display:block;} run very well – Jun 01 '15 at 12:18
Did you even try the vertical-align change before saying this solution is wrong? Also I think that believing that it "is the right way to do it ... because it works" is not the kind of mindset a developer should have – Philipp Jun 01 '15 at 15:22

score 0 · Answer 4 · answered Jun 01 '15 at 12:09

0

.gridgallery figure img {
    width: 100% !important;
    max-width:100%;
    opacity: 0.95;
    vertical-align: bottom;
}

answered Jun 01 '15 at 12:09

Zast

492
2
7
22

link is under the image

4 Answers4