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.
Related
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...)
I have set up vertical alignment using the same value line-height, vertical margins and paddings, but when there is a smaller element, like the <small> tag, inside the flow, it ruins for some pixels the vertical rhythm, I can solve adding vertical-align:top/bottom but the element is not aligned with the other text, U can add display:inline-block and transform:translateY(1px) to solve the other issue but this is not an elegant solution. Is there some other solutions? And I'm wondering why smaller texts work like that.
I linked a photo to make more clear.
screenshot
This seems to work without breaking vertical alignment:
p small {
line-height: 100%;
}
If you want your lines of text to always have the same height, so they match your background, use line-height property.
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;}
Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
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;
}