Mystery white space underneath image tag
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;
Image inside div has extra space below the image
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
- adjust the
vertical-align
of the image to position it elsewhere (e.g. themiddle
) or - change the
display
so it isn't inline.
div { border: solid black 1px; margin-bottom: 10px;}
#align-middle img { vertical-align: middle;}
#align-base img { vertical-align: bottom;}
#display img { display: block;}
<div id="default"><h1>Default</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>
<div id="align-middle"><h1>vertical-align: middle</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div> <div id="align-base"><h1>vertical-align: bottom</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display"><h1>display: block</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>
Remove white space below image
You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img
is an inline element by default. This removes the gap:
.youtube-thumb img { display: block; }
Why does my image have space underneath?
Images (and inline-block elements in general) are treated like a character.
As such, they obey the rule of the baseline.
In normal text, the baseline is the line across the bottom of most letters, such as in this sentence.
But some letters, such as p
, q
, j
and so on, have tails that drop below the baseline. In order to prevent these tails from colliding with letters on the next line, space is reserved between the baseline and the bottom line.
This diagram illustrates the different lines used by text:
(Image from WHATWG)
So, the image is aligned to the baseline, even if there is no text. Fortunately, the fix is very simple:
img {vertical-align:bottom}
This will align the image to the bottom of the line, also removing the mystery space.
Just be careful, if your image is small (smaller than the line height), you may start seeing mystery space appearing above the image instead. To fix this, add line-height:1px
to the container element.
Hopefully this helps the many people I've seen ask about this and similar problems!
CSS3: Strange padding on bottom of an image
The img is an inline element, so it takes the line-height into consideration. To avoid the space below the image you can do one of the following things:
- set
float: left
on the image - set
display: block
on the image - set
line-height: 0
on the .info div
White space at bottom of anchor tag
The image is display: inline
so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).
Adjust the vertical-align
with CSS: img{vertical-align: bottom}
Related Topics
How to Arrange HTML Label and Input Side by Side
How to Affect Other Elements When One Element Is Hovered
Angular 8 Material Dialog Close Button With X Top Right
Embed Pdf on a Webpage and Prevent Download
Angular 4 Img Src Is Not Found
Print Header/Footer on All Pages (Print Mode)
How to Disable Hover Effect for Active Link
How to Disable an Input Dynamically With Angular 7
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
How to Display Multiple Lines of Text in Svg
How to Use Two Ngfor in HTML Angular 4
How to Modify the Primeng P-Calendar Style
React: Action on Variable Change