编辑：想通了，解释在下面
我有一个链接到大图的缩略图图库。我正在使用bootstrap 3。
有些图像无法填满整个列，并且每个图像之间的空间大小不一（但bootstrap会正确对齐它们）。由于某些原因，额外的空间是“可单击的”。我希望只有一个图像是可单击的。我该如何做到这一点？
代码的相关部分从<div class="row">开始。
<body>
{% include "gallery_navbar.html" %}
<div class="tab-content">
{% for pane_name, reddit_posts in reddit_posts_by_pane.items %}
{% if pane_name == "food" %}
<div role="tabpanel" id="{{ pane_name }}" class="tab-pane active">
{% else %}
<div role="tabpanel" id="{{ pane_name }}" class="tab-pane">
{% endif %}
{% if reddit_posts %}
<div class="row">
{% for reddit_post in reddit_posts %}
<div class="col-lg-4 col-sm-4 col-xs-6">
<a data-rel="prettyPhoto[asd]" title="Image {{ reddit_post.rank }}" href="{{ reddit_post.submitted_link }}" style="display:block; height:100%; width:100%;">
<img class="thumbnail center-block" data-src="{{ reddit_post.submitted_link }}">
</a>
</div>
{% endfor %}
</div><!--end row-->
{% endif %}
</div><!-- end tab-pane-->
{% endfor %}
</div><!--end tab-content-->编辑：额外的水平链接空间用display: inline-block去掉了，但是底部填充/边距仍然链接到链接。我可以用margin-bottom=0px去掉底部填充，但是我还没有找到一种方法来重新添加底部填充。
edit 2：我无法更改row div标签，即使添加另一个类（如“row-padded”）使其成为：
<div class="row row-padded">使用css：.row-padded{ margin-bottom:30px}
因此，我只是在链接顶部添加了一个div标记。
3条答案
按热度按时间yfwxisqw1#
img标记显示为内联文本，位于文本基线上，基线下方有空间用于放置任何字符下行符和下划线。将
img显示为块可解决此问题。试试看：
这使得作为父
a的唯一子的图像显示为块。这里有一个很好的描述，说明为什么会发生这种情况：http://doctype.com/anchor-tag-containing-only-img-extends-below-bottom-image
sc4hvdpw2#
试试这个，像下面这样更改html
工作演示http://jsfiddle.net/qb7xnfbd/
yjghlzjz3#
您也可以使用
<a>上的display：contents：它将完全消失（沿着其他样式，如边距），您可以直接对图像进行样式设置，就好像周围没有<a>一样。但在可访问性方面有一个警告：https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents