CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alds
Alds

Reputation: 85

Link extends to space outside of image

Edit: figured it out, explanation at the bottom

I have a gallery of thumbnail images that link to the bigger image. I am using bootstrap 3.

Some images don't fill up the entire column and there is varying amount of space between each image(but bootstrap aligns them correctly). For some reason, the extra space is "clickable". I want the only the image to be clickable. How do I do this?

The relevant part of the code starts at <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-->

edit: The extra horizontal link space went away with display: inline-block but the bottom padding/margin still links to the link. I can remove the bottom padding with margin-bottom=0px but I haven't figured out a way to add the bottom padding back.

edit2: I couldn't change the row div tag, not even by adding another class like "row-padded" making it:

 <div class="row row-padded">

with css: .row-padded{ margin-bottom:30px}

So I just went the roundabout way by adding a div tag on top of the link.

Upvotes: 2

Views: 2918

Answers (3)

Guillaume Durand
Guillaume Durand

Reputation: 21

You can also use display:contents on the <a>: it will completely disappear (along with other styling such as margin) and you can style the image directly as if there was no <a> around.

But there is a caveat with accessibility: https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents

Upvotes: 0

Fonant
Fonant

Reputation: 397

The img tag displays as inline text, sitting on the text baseline, which has space below it for any character descenders and underlines.

Making the img display as a block fixes the issue.

Try:

a > img:only-child {
  display: block;
}

which makes images that are the only child of a parent a display as a block.

A nice description of why this happens can be found here: http://doctype.com/anchor-tag-containing-only-img-extends-below-bottom-image

Upvotes: 5

Alien
Alien

Reputation: 3678

try this, change html like below 

<div class="row">

          <div class="col-lg-4 col-sm-4 col-xs-6 text-center"><!--add class text-center-->

            <a data-rel="" title="" href="" style="display: inline-block;"> <!-- change style attribute -->
              <img class="thumbnail align-center" src="" style="margin-bottom:0px;"><!-- remove class center-block and add style attribute    -->
            </a>
          </div>
</div>

working demo http://jsfiddle.net/qb7xnfbd/

Upvotes: 1

Related Questions