Odd behavior - img display:block vs img display:inline-block

Question

I prefer to use img display:block because pages won't render with extra blank pixels under images. However I noticed this can produce odd results. If I use display:block on an image attached to a link that sits in a DIV that is larger than the image the entire DIV becomes a link.

Here is my jsfiddle example: https://jsfiddle.net/j42Ln4g8/1/

Am I using display:block incorrectly or is there an elegant way to fix this? I know I can use an internal, wrapper DIV that's the same dimensions as the image to solve this but I thought there might be a smarter way.

HTML

<div class="image_holder">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>

<div class="image_holder2">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>

CSS

.image_holder {
  margin:20px 0px;
  background-color: aquamarine;
}

.image_holder img {
  display: block;
}

.image_holder2 {
  margin:20px 0px;
  background-color: aquamarine;
}

.image_holder2 img {
  display: inline-block;
}

This is an XY question, the proper way to fix your problem is `vertical-align`, not `display: block`. See [Image inside div has extra space below the image](http://stackoverflow.com/q/5804256/1529630) — Oriol, Jan 15 '17 at 03:38

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

Block element forces a line break and takes the full width of its parent element. It does not allow other elements to come to their left and right.

Use display:inline-block; on your a tag and display:block; on your img. So that there will be no issue of page not rendering with extra blank pixels under images. and your whole div won't become a link.

EDIT: Add vertical-align:bottom; to the a tag. As suggested by Oriol

.image_holder {
  margin:20px 0px;
  background-color: aquamarine;
}
.image_holder a{
  display:inline-block;
  vertical-align:bottom;
}
.image_holder img{
  display:block;
}

.image_holder2 {
  margin:20px 0px;
  background-color: aquamarine;
}

.image_holder2 img {
  display: inline-block;
}

<div class="image_holder">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>


<div class="image_holder2">
  <a href=""><img src="http://imgur.com/a/76mr6" width="180" height="200"></a>
</div>

edited May 23 '17 at 11:45

Community

1
1

answered Jan 15 '17 at 03:13

ab29007

7,611
2
17
43

I added `display:inline-block` to my anchor and it rendered the extra pixels under the image just as if I had applied that code to the image. I updated my jsfiddle to show this. Dang! – DR01D Jan 15 '17 at 03:33
Eh, but this does not remove the space at all. Well, instead of having the space below the image, now it's below the link. – Oriol Jan 15 '17 at 03:42
I added `display:inline-block` to the parent `DIV` (not the anchor) and it fixed the problem on the spot. I'll have to remember this one. – DR01D Jan 15 '17 at 03:44
@DR01D That will just move the problem to the container. The proper way to fix this is with `vertical-align`, because it's what caused the problem in the first place. Don't mess with displays. – Oriol Jan 15 '17 at 03:47
I reset the image back to `display:inline-block` and added `vertical-align:top` to it's style and sure enough that worked perfectly. No extra space under the image and the link didn't spread to the entire `DIV`. Bingo! – DR01D Jan 15 '17 at 03:53

score 1 · Answer 2 · answered Jan 15 '17 at 03:15

block level elements occupy 100% width of their container by default, so that behavior is to be expected. A way to get rid of the space that shows up after an image is to set font-size: 0; to the parent, as it's the spaces around the images that creates that space since white-space is preserved around inline elements.

You could also float the element, then clear the parent.

Here is an example of both techniques.

.image_holder {
  margin:20px 0px;
  background-color: aquamarine;
  overflow: auto;
}

.image_holder img {
  float: left
}

.image_holder2 {
  margin:20px 0px;
  background-color: aquamarine;
  font-size: 0;
}

.image_holder2 img {
  display: inline-block;
}

<div class="image_holder">
  <a href=""><img src="http://imgur.com/a/hf7jx" width="180" height="200"></a>
</div>

<div class="image_holder2">
  <a href=""><img src="http://imgur.com/a/hf7jx" width="180" height="200"></a>
</div>

I added `font-size: 0;` and `display:inline-block;` to the parent and it solved the problem on the spot. No extra pixels under the image and the link doesn't cover the entire `DIV`. — DR01D, Jan 15 '17 at 03:40
addendum: `display:inline-block;` added to the parent `DIV` (but not the anchor) fixes the problem even without the `font-size` tag. — DR01D, Jan 15 '17 at 03:42

Odd behavior - img display:block vs img display:inline-block

2 Answers2