Menu
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.
489
display: block An element that has the display property set to block starts on a new line and takes up the available screen width. You can specify the width and height properties for such elements. Examples of elements that are at block-level by default are <div> , <section> , <p> , and lots more.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
From all the above information, we came to know that, HTML display block property in HTML helps us to set our layout in proper structure. Those blocks in the layout can be put either vertical or horizontal direction one after another. It include elements like <div>, <section>, <form>.
IMG elements are inline, meaning that unless they are floated they will flow horizontally with text and other inline elements. They are "block" elements in that they have a width and a height.
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
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
