链接在图像下

Question

我在使用link和img时遇到问题，因为链接中有一个小空间。

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/

Answer 1

请尝试以下操作： Demo

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

Answer 2

试试这个：

#!/usr/bin/perl

my $baseDir = "<My base dir>";

opendir my $dh, $baseDir
  or die "$0: opendir: $!";

my @dirs = grep {-d "$baseDir/$_" && ! /^\.{1,2}$/ && ! /^\.[a-zA-Z]*/}        readdir($dh);
print "DIRs is @dirs\n";

Answer 3

请在此问题中查看已批准的答案： stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag

设置图像的属性vertical-align:bottom（无需更改高度/宽度或显示：块，...）

Answer 4

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