45

I just changed the header image on my site from

<div style="background-image... width=1980 height=350>

to using

<img src="... style="width:100%;">

so the image would scale down which it now does...

But now I have this mysterious 10px gap or so.

I've checked the inspector in Chrome, and I just can't see what's causing the space. I've searched other posts but can't find anything that applies.

Anyone out there have any idea? Appreciate any help, Bob :)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
bob32
  • 505
  • 1
  • 6
  • 12

3 Answers3

94

Look at this line of text. Notice there are no letters that breach the baseline.

Now look at the following sentence:

By just crossing the bridge he probably got away.

Note the letters j, g, p and y. These letters, known in typography as descenders, breach the baseline.

enter image description here

Source: Wikipedia.org

The default value of the vertical-align property is baseline. This applies to inline-level elements.

Your img is inline-level by default and, like text, span, input, textarea and other inline boxes, is aligned to the baseline. This allows browsers to provide the space necessary to accommodate descenders.

Note that the gap is not created by margin or padding, so it's not easy to detect in developer tools. It's a slight elevation of content from the container's bottom edge resulting from baseline alignment.

Here are several ways to handle this:

  1. Apply vertical-align: bottom to the img tag. In some cases bottom won't work, so try middle, top or text-bottom.
  1. Switch from display: inline to display: block.
  1. Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.
  1. Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.

Related:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 6
    Mind = blown... Great description. – cgatian Apr 12 '17 at 13:37
  • 1
    `In some cases bottom wont work` what are these cases? – Temani Afif Nov 14 '18 at 14:56
  • I saw exceptions when I wrote the answer 3 years ago. Honestly, I don't remember them now. @TemaniAfif – Michael Benjamin Nov 14 '18 at 15:06
  • 1
    @TemaniAfif If you're using `vertical-align: bottom` or `middle`, if your image is small (smaller than the line height), you may start seeing mystery space appearing *above* the image instead. https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath#answer-17905828:~:text=if%20your%20image%20is%20small%20(smaller,space%20appearing%20above%20the%20image%20instead. Reduced test case: https://jsbin.com/jotacipaqu/1/edit?html,css,output – Oliver Joseph Ash Nov 15 '20 at 17:02
33

By default, IMG is an inline element. You need to set your IMG tag to be a block element, which can be accomplished with this style:

display: block;
Kaitebug
  • 485
  • 4
  • 6
  • Wow, thanks... I found this "scaling solution" here: http://stackoverflow.com/questions/15458650/make-an-image-responsive-simplest-way - and they didn't include that. of course after fiddling with css for about 10 years now, I should have known :/ Thanks again! :) – bob32 Jul 16 '15 at 03:36
9

Add

display: block;

to the <img>.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75