21

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.

Community
  • 1
  • 1
Baumr
  • 6,124
  • 14
  • 37
  • 63
  • 1
    **@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: http://stackoverflow.com/questions/13111136/why-is-there-a-pesky-little-space-between-img-and-other-elements – Baumr Oct 30 '12 at 18:50
  • in css, 'block' means taking the hold line and make a break – jondinham Oct 31 '12 at 05:36

4 Answers4

23

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

David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • 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?** – Baumr Oct 31 '12 at 15:10
  • 1
    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` – David Nguyen Oct 31 '12 at 19:17
  • 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 :) – Baumr Nov 01 '12 at 04:01
4

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.

Dr Fred
  • 939
  • 8
  • 15
2

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

DR01D
  • 1,325
  • 15
  • 32
1

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.

Shachi
  • 1,858
  • 3
  • 23
  • 41