CODEWITHSUNDEEP
htmlcss
imjp
imjp

Reputation: 6695

Why is there whitespace between the image and the div?

Please take a look at this link: http://bethhaim.spin-demo.com/

I can't figure out why there is a whitespace of about 3 pixels between the image and the div below it. Anyone have an idea what is causing this?

Upvotes: 3

Views: 1700

Answers (4)

MCSI
MCSI

Reputation: 2904

add a display: block; to your image

Upvotes: 2

chemick
chemick

Reputation: 146

The image tag is treated as an inline element, and it's displayed the same as if it were a long line of text. The extra space you see is for 'descenders' of lowercase text, the part that sticks out in 'j', 'y', etc.

a display: block on your image will fix the gap.

More information: http://devedge-temp.mozilla.org/viewsource/2002/img-table/

Upvotes: 5

Caleb Doucet
Caleb Doucet

Reputation: 1781

If you set your img to display: block; you shouldn't see the space anymore.

Upvotes: 2

Alex
Alex

Reputation: 35417

Your image is being displayed display:inline with a line-height:18px which is causing the spacing.

Either adjust the line-height to something more appropriate or set the images' display to display:block.

Upvotes: 9

Related Questions