Solve white space gap under image elements | work.arounds.org

Mysterious white space gap under image elements

Images are inline elements, and inline elements need some sort of guarantee such that characters like y and g can fit into the line. The space reserved for these types of characters is called the descender space, so any inline element will have this reserved space beneath it.

Workaround #1

Force the image element to be block-level.

img#id { display:block; }

If you don’t feel comfortable with setting that lone image element to block level or if doing so causes the layout to break, there’s another alternative:

Workaround #2

img#id { vertical-align:bottom; }

The image will flush to the bottom if you set it’s vertical align to bottom.

Comments

.

0 comments posted

Post a comment