Is there any guide on “When to use display:block when :inline and when :inline-block” and why?

Question

Do you know any good article on \"When to use display:block when :inline and when :inline-block\" and why?

and when we will ha

Answer 1

By default a division displays as a block. This puts it on its own line and expands to fill its container. An inline element basically makes a division into a span (in its default state). You can't apply much anything to it anymore and it displays inline with any text. You can get a median between the two: inline-block. This allows more styling to be done on the division, including setting a width and height, but still displays the 'block' inline with the text, sort of like an image.

So, inline, inline-block, and block are more like levels of an element, each with certain styles that can/cannot be applied to the element.