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):
You could try setting the container’s height to that of the image:
which works in the simple case, but not when we start to add padding and/or borders to the image:
The cleanest ‘fix’ is to explicitly define the image’s display as block, solving both problems:
#example4 img {
display: block; }
Text next to the image
A value of bottom for vertical-align also fixes this ‘problem’.
#example5 img {
vertical-align: bottom; }
Text next to the image
References
- Mozilla’s article Images, Tables, and Mysterious Gaps discusses the issue with a focus on images contained in tables
- Henri Sivonen's excellent article, Activating Browser Modes with Doctype explains how to ensure your documents will trigger your preferred mode.
Tweet
