Block
elements with display: block;.
- It occupies the entire horizontal space of its parent element.
- Always start on a new line.
Most elements by default belongs to this category. For a complete list please refer to MDN list of block elements
Inline
elements with display: inline;
- Does not start on a new line.
- Its width and height are determined by the content.
- Not affected by width, height, margin-top, margin-bottom properties.
- Affected by horizontal padding and margin.
- Affected by padding-top and padding-bottom, but only visually. Other elements will not respect the vertical paddings.
For a complete list of inline elements MDN list of inline elements
Inline-block
elements with display: inline-block
- An inline element that respects margin, width and height.
Top comments (1)
inline-block = An atomic inline-level element that respects margin, width and height, and is a block container for its contents.
inline-flex = An atomic inline-level element that respects margin, width and height, and is a flex container for its contents.
inline-grid = An atomic inline-level element that respects margin, width and height, and is a grid container for its contents.