Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html, css - weird invisible margin below pictures

Tags:

css

margin

image

People also ask

How do I get rid of the extra white space under an image in CSS?

Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.

How do I get rid of the bottom margin in HTML?

row div. and make it margin-bottom: 0px; Note: this is really easy to figure out using Chrome dev tools!!

Why is div bigger than IMG?

The gap or extra space under the image isn't a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to "act like image" and have their own intrinsic dimensions, aspect ratio....


This is actually not that uncommon. It's because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.

The easiest solution to this is to simply use display:block; to turn the image into a block element. Floating the image using float:left; or float:right; also works as that also turns it into a block element.

Adjusting properties like the vertical-align, font-size and line-height may also affect the distance, but it's not as robust as it doesn't really remove the effect. It might still appear in some circumstances.

Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue


sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility ..... answer: only add "vertical-align: top;" to img tag inside a tag.


For me

font-size: 0;
line-height: 0;

on the wrapping container did the trick.


Try to change the DOCTYPE section to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

You can also check this: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails