annoying CSS margin on images

upside · Jun 21, 2012

This might be a stupid question and I might be missing something, but why do my images seem to have a default right and bottom margin on them (in Chrome) and how can I remove it?

Take a look here:
http://upsidecreative.com.au/test for no margins.html

Many thanks,
greg

Edge · Jun 21, 2012

If you put them all on one line the white space disappears.

CaldwellYSR · Jun 21, 2012

put display:block; on your images and it fixes your problem. Then if you want to keep that grid you float them left.

That white space is because their default display for images is display: inline; and display inline reads the white space in html and turns it into one non breaking space.

CaldwellYSR · Jun 21, 2012

RAJO said:
well it isn't a stupid question but sometimes you can't just use anything to fix that problem you could try enlarging the image or down sizing it see which looks right on all the search engines

Do you even read questions or do you just post crap answers at the bottom?

DHDdirect · Jun 21, 2012

CaldwellYSR said:
Do you even read questions or do you just post crap answers at the bottom?

I have half a mind to buy the "business for sale" so they'd piss off ;-)

upside · Jun 22, 2012

CaldwellYSR said:
put display:block; on your images and it fixes your problem. Then if you want to keep that grid you float them left.

That white space is because their default display for images is display: inline; and display inline reads the white space in html and turns it into one non breaking space.

Awesome, thanks Caldwell.
g

Phreaddee · Jun 22, 2012

actually you dont even need to add the display:block;

just float:left;

when an element is floated display inline is treated as display block anyway.

http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#dis-pos-flo

annoying CSS margin on images

upside

New Member

Edge

Member

CaldwellYSR

Member

CaldwellYSR

Member

DHDdirect

New Member

upside

New Member

Phreaddee

Super Moderator