Display property 💻

Formally, the display property sets an element’s inner and outer display types. The outer type sets an element’s participation in the flow layout; the inner type sets the layout of children. Some values of the display are fully defined in their own individual specifications.

display: block;
display: inline;
display: inline-block;
display: none;

Block 📦

This property is used as the default property of div. This property places the div one after another vertically. The height and width of the div can be changed using the block property if the width is not mentioned, then the div under the block property will take up the width of the container.

Inline 🚆

This property is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user.

Inline-block 🗳

This feature uses both properties mentioned above, block and inline. So, this property aligns the div inline but the difference is it can edit the height and the width of the block. Basically, this will align the div both in the block and inline fashion.

Summary 📄

Block:

1. respect all of those
2. force a line break after the block element
3. acquires full width if width not defined

Inline:

1. Respect left & right margins and padding, but not top & bottom
2. Cannot have a width and height set
3. Allow other elements to sit to their left and right.

Inline-block:

1. allow other elements to sit to their left and right
2. respect top & bottom margins and padding
3. respect height and width

Reference links: 🔗

display - CSS: Cascading Style Sheets | MDN