Block, Inline & Inline-block. What’s the difference?
Block, Inline, and Inline-block, these 3 display properties are used a lot and their difference is often asked during UI interviews. Most HTML Elements have either of these properties by default, particularly the block property.
Setting an element as a block will force the element to take up the entire width of the parent container. The only way to manage the width of a block element is to change the width of its parent element.
It also generates line break, so even if there is more space, subsequent block elements won’t use it and get stacked on top of each other
Some of the block elements are div, section, p, nav, etc. You can check this list for more examples.
Unlike block elements, inline elements don’t take up the entire space on the line i.e., they remain on the same line or inline and don’t create line-breaks
The height and Width property doesn’t work on these elements. They simply take up as much space as the content within them.
Some of the inline elements are a, b, button, input, etc. You can check this list for more examples.
These elements are in essence just the Inline elements, with a slight difference that we can set a property of height and width to them.
With this property, we also allow elements to have a padding and margin property like block elements and, also resist the new lines like inline elements.
HTML: HyperText Markup Language | MDN
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of…
Block, Inline, and Inline-Block explained | CSS Tutorial
Understanding how block, inline, and inline-block each behaves is very important when learning CSS, as well as knowing…