Difference between block and inline block in CSS

CSS display property introduction:
For the understanding, the difference between block and inline-block in CSS, let see understand what is display property in CSS. The display property in CSS specifies how elements should be rendered like block or inline that creates the layout.

Elements have inner and outer types.
Outer type: Sets an elements participation in flow layout.
Inner type: Sets the layout of children

Difference between inline, block and inline-block in CSS?

inline:

1. Displays an element as an inline element like span, li etc.
2. Height and width properties will have no effect.

block :

1. Displays an element as a block element like p, div etc.
2. It starts on a new line
3. Takes up the whole width.
4. The element can not sit next to other elements.

inline-block:

1. Displays an element as an inline-level block container.
2. The element itself is formatted as an inline element.
3. Allows setting a width and height on the element.
4. The element can sit next to other elements

Also, read What are promises in JavaScript?