Downside of "display: block" for images?

css image css-float positioning responsive-design
Baumr picture Baumr · Oct 30, 2012 · Viewed 21.2k times · Source

Is there any downside to converting img from inline-block elements into block objects with the display: block CSS property?

Most of the time, I want them to be block elements. Any useful inline aspects that I am losing? (Perhaps I am not seeing some as useful?)

Should all images be converted into block elements by default? Why are they inline-block elements according to spec?

P.S. I am asking this with considerations for layout via positioning & floats, and surrounding elements.

Answer

David Nguyen picture David Nguyen · Oct 31, 2012

Well considering that a block will force anything after to line break, there is only one scenario where it would be bad:

If you plan to have another inline element (text, another image, span, etc) beside it

Related questions

Position div to bottom of a different div, without using Absolute

I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float …

Read More
How can I use CSS to style multiple images differently?

I am basically styling a long essay with various images scattered throughout. I would like the first image to "float: left" and the second one to "float: right". I know that I can style the images like this: img { float: …

Read More
How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?

I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping. I want the images …

Read More