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.
display:inline
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.
The HTML<span> element is inline by default as well as several other elements listed here.
display:inline-block
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.
display:block
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
Comments are closed.