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;
}
Related
I'm trying to understand how the line-height property in CSS works. I know that it sets the spacing between lines of text. What I don't understand is why, when you set line-height the same as the height of the container, it vertically aligns the text. For example, if you did this:
.btn {
height: 22px;
line-height: 22px;
}
And create an element with the "btn" class, the text in that element will vertically align to the center and I don't understand why. To me, it makes more sense for the first line of text to appear at the very top of the container, and the second line to be at the bottom, possibly overflowing, since that will be 22px down. Can someone please tell me why it works this way, because I don't feel like I can understand the line-height property fully unless this is explained. Thank you.
line height is the amount of space above and below elements. thats pretty much all I can tell you.
If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).
Here is a link that demonstrates this
.shorty
{
height: 12px;
}
.liney
{
line-height: 25px;
}
Line height is actually referring to the top and bottom vertical spacing between the phrases. The reason why setting the same height as the line-height as it will auto centralise the invalid spaces. Sharing the similar explanation to centralising the body using margin {auto 0}
You can play with the examples available in w3schools.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height
Ref:
http://www.w3schools.com/cssref/pr_dim_line-height.asp
It helps me to understand CSS3 syntax and attributes even more.
I hope my share could help you. :)
Edited: I just happens to find a better answers to your question in here: How do I vertically center text with CSS?
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.
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;}
I can't seem to wrap my head around how img tags behave alongside text in an html page.
I've removed margins and padding, but there always seems to be some extra space under the img or some other unexpected behavior. I'm sure theres quick CSS workaround using absolute positioning or negative margins but I'm looking for a more general solution.
Question: Can someone explain how img tags are positioned, specifically why do they get offset vertically when alongside text?
If you want the <img> to be an inline element, you can use the vertical-align CSS attribute to specify how the image will be aligned relative to the line of text it appears in. This page has examples under the "vertical-align on inline elements" heading.
The key to getting your text to wrap around your image is setting the float attribute like so:
img {
float:left;
display:block;
}
CSS has two types of display: attributes: block and inline.
Inline is like text. It streams along, wraps at the end of a box, stuff like that.
Block is chunky and has margins and padding and width (either calculated or derived).
It doesn't make a whole lot of sense, but <img> is actually an inline element, along with <a>, <abbr> and many others. What's happening is that the image is actually being rendered roughly equivalent to letters, and it just happens to not be 12pt tall, but maybe 130px or whatever your image is. That's why it sticks up.
Declare <img style="display:block;" src="image.png" /> to get it to behave like the box most people think it is.
IMG elements get positioned just like any other inline element.
What you see under the img is the space needed for the descendant part of a glyph like g or j. An image behaves just like a letter and sits on the baseline.
img
{
display: block;
}
Will fix it for you.
An experiement that might shed some light:
<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p>
Think of the <em> as a ~128px high image (if 1em is 16px that is).
If you want more control over your image positioning, wrap your image in a DIV and control the positioning of the DIV. You can float the div if you want to intermingle it with your text.
This might not be relevant in this particular case (hopefully the advice from previous answers should solve your problem), but if you're finding you're getting unexpected extra space around elements, make sure that you've removed the default padding, margins etc. that browsers often add to elements (and of course different browsers often add different amounts of padding, margins etc.
If you make sure you've zeroed margins and padding etc. by using
body { margin: 0; padding: 0; border: 0; }
at the start of your CSS, you can then add any padding and margins etc. without having to worry that the browser's defaults are going to cause any unexpected spaces, and hopefully fewer inconsistencies between browsers.