Space under tag

Question

I have this annoying space under my picture for no reason. I'm using www.getskeleton.com as the framework.

HTML code

<div class="four columns bottom">
  <div class="box">
    <img src="images/picture.png" title="" alt="">
  </div>
</div>

CSS code

.box{
  border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}

Here there is the space under the picture

You'll need to give us more to go on than just what you've posted. Can you recreate the problem on jsfiddle.net? — Billy Moat, Dec 17 '12 at 15:32
Does this answer your question? [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — Oliver Joseph Ash, Nov 15 '20 at 16:58

Mike Hopkins · Accepted Answer · 2014-10-29T00:57:40.033

Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).

The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.

The fix:

img {
  vertical-align: top;
}

I hope that helps someone who may have run into this problem.

Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.

However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.

I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.

Just had to use this in the latest version of chrome (3 years after the answer was posted). the Image in question was in a flex container which, while is widely supported now, isn't without its quirks. — Bcbury, Feb 08 '18 at 14:33
Fixed `` in `` in `
` in Chrome 78 and Firefox 70. Good analysis: **the gap is room for [descenders](https://en.wikipedia.org/wiki/Descender)**. — Bob Stein, Nov 11 '19 at 15:26

score 2 · Answer 2 · answered Dec 17 '12 at 15:28

2

Try this:

.box img {
    display: block;
    padding: 0px;
    margin: 0px;
}

answered Dec 17 '12 at 15:28

qwerty

5,166
17
56
77

5

there is no need to specify the measure unit when the value is 0 – Bruno Dec 17 '12 at 15:29
Do you have a link to your site or a jsfiddle? @bru.scopelliti I know, it just feels more natural though. – qwerty Dec 17 '12 at 15:31
You will need to either have `display: inline-block` or `float: left` – jsweazy Dec 17 '12 at 16:34

score 1 · Answer 3 · answered Dec 17 '12 at 15:30

1

Try this: .box { font-size: 0; }

answered Dec 17 '12 at 15:30

BoomyJee

61
2
8

score 0 · Answer 4 · answered Dec 17 '12 at 15:43

0

Your image need to be floated. Try this:

    #yourimage{
        float: left;}

answered Dec 17 '12 at 15:43

Bruno Monteiro

712
6
22

score 0 · Answer 5 · answered Dec 17 '12 at 16:18

0

As mentioned, more information would help a lot but i have no doubt that it is padding that is causing the border to go out of the image, reason put very simply being

margin pushes outside the element
padding pushes inside the element

as it were.

Fix then:

.box {
    padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
    margin-bottom: 0px;
}

answered Dec 17 '12 at 16:18

Jamie Hutber

26,790
46
179
291

Doubt is [good](https://stackoverflow.com/a/26608149/673991). – Bob Stein Nov 11 '19 at 15:27

score 0 · Answer 6 · answered Dec 17 '12 at 16:28

0

It's an age old quirk - the whitespace from your line formatting is causing the gap. Add <br /> after the image.

answered Dec 17 '12 at 16:28

thinice

700
5
19

score 0 · Answer 7 · answered Oct 12 '21 at 09:11

0

Try this

.box{
    display:flex
}

answered Oct 12 '21 at 09:11

Atif Saleem

126
1
4

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 12 '21 at 13:56

Space under tag

7 Answers7

Linked