Why is my picture link extending beneath the image?

Question

I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.

Here's a Jsfiddle better showcasing my code and the problem

.photo {
  text-align: center;
  float: left;
  width: 70%;
  margin-left: 8%;
  margin-top: 5%;
  margin-bottom: 5%;
}
.photo a {
  border: 1px solid red;
}
.photo img {
  margin: 1%;
}

<section class="photo">
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
</section>

I added a border to the problem area. Any help is much appreciated!

Answer 1

because a and img are inline elements, so

• make a a block level element by display:block, to the border appear around the image
• set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)

Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.

See more about inline elements here on w3

.photo {
  text-align: center;
  float: left;
  width: 70%;
  margin-left: 8%;
  margin-top: 5%;
  margin-bottom: 5%;
}
.photo a {
  display: block;
}
.photo img {
  display: block;
  border: 1px solid red;
  max-width: 100%;
  margin: 1%
}

<section class="photo">
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
  <a href="#">
    <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
  </a>
</section>