The inline, inline-block, and block layout values are all possible values for the CSS display properties. Many newbie frontend developers usually struggle with understanding the difference between the three, and it’s a common frontend developer interview question.
When an element is styled with
display:inline, it will not start on a new line, will only take up as much width as the content it contains, and will not cause a line break after it.
For example, consider the code below:
As you can see, the inline element is not affected by the declared width or height.
element is inline by default as well as several other elements listed here.
The difference between an inline element and an inline-block element is that an inline-block element can take up specified width and height. But, it will also not start on a new line within its parent or cause a line break after it.
As you can see, the inline-block element does not start on a new line, but it takes up the specified width and height.
Any element styled with
display: block is the polar opposite of
display:inline. A block element starts on a new line and occupies the available width of its parent element or its specified width.
As you can see, the block element starts on a new line.
The HTML [p],
[div], as well as other elements listed here are block elements by default.
Blog Credits: Linda Ikechukwu