Difference between Inline, Inline-block, and Block elements in CSS

Inline elements:

• Inline elements do not start on a new line.
• They only take up as much width as necessary.
• Examples of inline elements include span, a, strong.

Inline-block elements:

• Inline-block elements start on a new line.
• They can have width and height set.
• They respect top and bottom margins and paddings.
• Examples of inline-block elements include img, button, input.

Block elements:

• Block elements start on a new line.
• They take up the full width available.
• They respect all margins and paddings.
• Examples of block elements include div, p, h1.