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

Leave a comment