Html 5 strange img always adds 3px margin at the bottom

Attack strats: display property

Block-level display: Simple and effective

Setting the image's display to block heralds its metamorphosis from an inline stowaway to a full-fledged block-level citizen, banishing the unwanted 3px margin:

img { display: block; } /* Block to the rescue */


Our little transformative spell instructs the browser to give the image its deserved throne — on a new line and occupying the full width available. The descenders' space then becomes a thing of the past.

Inline-block display: Have your cake and eat it too

Yet another way to address the issue is assigning display: inline-block to the image. A hybrid of both inline and block, it allows you to tackle different layout challenges:

img { display: inline-block; } /* Best of both worlds */


This 'mutant' property lets the image cohabit with neighboring elements. At the same time, it successfully squashes down the offensive 3px margin, behaving much like a block-level element would.

Tweaking vertical alignment

The vertical-align property is a handy tool to adjust the vertical positioning of elements. For instance setting it to middle can ride you of the descender space woe:

img { vertical-align: middle; } /* Bye bye descender space */


It works by pushing the middle of the image to align with the baseline of the parent, effectively getting rid of the extra space at the bottom.

Balancing on the line: line-height and vertical-align

The line-height trick

Here's another strat: fine-tuning the line-height property. If you set it to 0, any extra space that appears under images will vanish:

img { line-height: 0; } /* No line, no problem */


Don't forget that the line-height effect depends on the context and parent element's properties.

The middle road: vertical-align: middle

Applying vertical-align: middle suits cases where the containing div is set to display: table. This combo gets rid of any additional padding reserved for descenders:

div { display: table; }
img { vertical-align: middle; } /* Middle to the rescue */


The image is then perfectly placed within the boundaries of the div without leaving any annoying extra space around.

Familiar foes: common scenarios

The doctype dilemma

Switching doctype declaration can affect the browser's rendering behavior. Migrating to HTML5 doctype, for instance, could curse you with the dreaded extra 3px margin. After such alterations, it's paramount to check your stylesheets for any unforeseen disturbances.

Floating conundrum

While dealing with floated elements, do remember to set the images nested within to display: block. This practice can safeguard you from any unintended vertigo-inducing margins:

img { display: block; } /* Keeping things straight. No margin vertigo here! */


Tables turned... literally

If you set a container div to display: table, and this causes some height havoc, (like a 50x50px image within a 53px tall div), it's often useful to revise the vertical-align property. Navigation and readability are preserved like so:

div { display: table; }
img { vertical-align: middle; } /* V-align, our trusty lifesaver */


When specific solutions come handy

Special scenarios and line-height:

From time to time, setting line-height equal to the image height or the container height can be helpful. This is especially true for elements where vertical-align tweaks don't really apply:

img { line-height: 3; }


This could be a head-scratcher, but trust me, it's effective in specific, albeit peculiar alignment situations.

Pattern recognition and adaptability

It may help to understand that images on the web behave like text lines, leading to extra space below them. However, rest reassured knowing that combinations of the solutions provided are sometimes required to achieve pixel perfection.