Space around images

In strict standards mode, an image defaults to display: inline, causing extra space below it. A containing div will therefore, not wrap ‘flush’ with the image (note the thin block of whitespace between the bottom of the image and the black border):

A sample image, purely for demonstration purposes

You could try setting the container’s height to that of the image:

A sample image, purely for demonstration purposes

which works in the simple case, but not when we start to add padding and/or borders to the image:

A sample image, purely for demonstration purposes

The cleanest ‘fix’ is to explicitly define the image’s display as block, solving both problems:

#example4 img {
  display: block; }
A sample image, purely for demonstration purposes Text next to the image

A value of bottom for vertical-align also fixes this ‘problem’.

#example5 img {
  vertical-align: bottom; }
A sample image, purely for demonstration purposes Text next to the image

References


Tweet

Comments

Thu 11 Dec 2014 04:52

purchase cialis online canada

purchase cialis online canada said:

I’m curious to find out what blog platform you have been working with?

I’m experiencing some minor security problems with my latest blog

and I would like to find something more safe. Do you have any suggestions?

Fri 12 Dec 2014 11:18

cialis canada online

cialis canada online said:

Quality content is the secret to be a focus

for the people to pay a visit the site, that’s what this website is providing.

Mon 15 Dec 2014 21:13

cialis buy canada

cialis buy canada said:

great points altogether, you simply gained a new reader. What could

you recommend about your publish that you simply made a few

days ago? Any sure?

Thu 18 Dec 2014 23:36

buy viagra online canada pharmacy

buy viagra online canada pharmacy said:

This website was… how do I say it? Relevant!!

Finally I've found something that helped me. Kudos!

Leave a comment