Downside of "display: block" for images?

Question

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.

Solution 1

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

Solution 2

There is one downside : If you plan to horizontally center an image applying "text-align:center" to the parent element, you cannot display the image as block or inline-block.

Solution 3

Put img { display: block; } in your CSS and forget about it. In the extremely rare instance that you need something different write an exception.

Solution 4

One hack found for block display:"block".

I had this image and the wavesurfer audio wave which I wanted as inline. But, the display:"block"; in the js of wavesurfer was not allowing it.

What I did was, saved this cdn file locally and changed the display to inline and position to absolute which solved my issue. The change is supposed to be done where the wave element is created.

Hope this helps someone. Thanku wavesurfer creators for such an amazing js.

View more solutions

Comments

[Baumr]

@Rocket, already have — is there something you're referring to? @Ates, I guess that, largely, what I'm asking is — why are they deemed as inline-block elements by the spec? For example, this can stir up some problems: stackoverflow.com/questions/13111136/…

[jondinham]

in css, 'block' means taking the hold line and make a break

[Baumr]

Thanks for engaging. That makes sense sense. From what I can tell, most websites use images as block elements primarily. I think I may start adding img { display: block; } to all my stylesheets. Typically I would do it on an image-to-image basis if the image caused a problem, but I think this solution is better. Unless there are any potential 'bugs' when it comes to layout, or browser inconsistencies?

[David Nguyen]

I wish I could answer that, it use to be an issue. I can't exactly remember the issue but I believe it was an inconsistency of rendering images between browsers (IE6) that programmers had to add display: block

[Baumr]

Yeah I remember something like that too... but not sure, hence why I'm asking. But it seems that this is pretty OK to do :)