Images gain a mysterious empty space underneath, even if padding:0;margin:0 are applied.
Demonstration
The red border should hug the image, but there is space on the bottom side.
What causes this, and how can I remove this space?
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!
Changing img to a block level element
img {
display: block;
}
will also remove the space below the image.
check out this CSS jsfiddle
CSS
div {border:1px solid red;width:100px;line-height:0}
img {width:100px;}
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
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 :)
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.
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:
Apply vertical-align: bottom to the img tag. In some cases bottom won't work, so try middle, top or text-bottom.
Switch from display: inline to display: block.
Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.
Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.
Related:
Why is my textarea higher up than its neighbor?
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;
Add
display: block;
to the <img>.
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
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 :)
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.
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:
Apply vertical-align: bottom to the img tag. In some cases bottom won't work, so try middle, top or text-bottom.
Switch from display: inline to display: block.
Adjust the line-height property on the container. In your code reference (since removed due to linkrot), line-height: 0 did the trick.
Set a font-size: 0 on the container. You can restore the font-size on the child element directly, if necessary.
Related:
Why is my textarea higher up than its neighbor?
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;
Add
display: block;
to the <img>.
I'm trying to remove all the padding/margin around the images in the bottom table of this PBWorks wiki page:
http://ja2v113.pbworks.com/w/page/29061905/Map%20Database%20Project%3A%20Azazel#view=page
However, there remains always a little bit of white space at the bottom of each image. At least in Chrome.
How do I get rid of this? If you look at the page "source" you can see I tried using CSS and HTML but haven't been successful.
Make block elements of the images:
img {
display: block;
}
Add vertical-align: bottom or display-block to the images. Those are two very different solutions for the same problem.
The problem is that they are inline blocks now and aligned on the baseline of the text. The white space you see is the space between the baseline and the bottom line of the font.
You can solve this by adding vertical-align: bottom to align the image at the bottom of the font, eliminating the white space.
Or you can display the images as block elements. By doing that there is no text line at all inside the link, but only the block image, so baseline doesn't matter anymore.
In your case I don't think the issue has to do with inline vs block-level elements, nor vertical-align.
Try setting line-height to 0 on your <td>s.
Can anyone tell me what is causing the space below the images? There seems to be extra padding in the divs with the red border relating to the images. I cant find this spacing in firebug at all.
Baffled.
alt text http://antony.co.za/so.jpg
By default, images align their bottom edges with the baseline of the text. That space you're seeing is the space below the baseline, used by decenders like q, p, y, etc. (The fact that you have no text is irrelevant - space for them is still reserved.)
You can get rid of it like this:
img { /* Or a suitable class, etc. */
vertical-align: bottom;
}
It'll likely be the vertical alignment - check the computed style to see what it currently is for the images, then try adding this to your stylesheet:
img { vertical-align: text-bottom; }
See That mysterious gap under images and What is Vertical Align for some examples of what's happening.
Probably padding related, maybe it is the div containing the image? Could probably help if you posted a link, if possible.
Using vertical-align bottom is one solution that works.
Since you don't appear to be using images inline with text though, the approach I'd take is to make the images block-level elements:
img {
display: block;
}