CSS display property

This is the best article (as of writing this note) I found from google The CSS Display Property: A Reintroduction To A Familiar Friend, it uses simple words to explain display property.

Most frequently used display values are the followings (there are a bunch of table-values and new CSS3 values based on flex box model or grid model)

• inline
• block
• inline-block
• list-item
• none
• inherit

inline - (Default value) The element is displayed as an inline element (like span, a), horizontally displayed and don’t follow the box model, so it doesn't form a new box.

block - The element is displayed as a block element (like p, div, h1), vertically one after the other following box model, so it is a new box with margin, border, and padding.

inline-box - The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element. It acts like inline boxes on the outside (being laid out horizontally), but they’re block level boxes on the inside (form a new box with vertical margins and paddings). It is height is calculated using line-height or based on containing block (box).

list-item - The element behaves like block level element with the addition of an extra box (the marker box) used to place a marker.

none - The element will not be displayed at all (removed from DOM, different from visibility)

inherit - The value of the display property will be inherited from the parent element