CSS Display property review


Removes the element and its children from the normal document flow. the space it occupied is collapsed. The content of the element is also disappeared.

display: inline;

The element creates one or more inline boxes. Inline-level elements take up, as the name suggests, as much space on the line as its tags outline.

display: block;

The element generates a block level box. All block-level elements start on a new line and, unless usually specified, extends to width of its container.

display: list-item;

An element rendered as a list-item behaves exactly like that of a block-level element, but it also creates a marker box, which can be styled by the list-style property.

display: inline-block;

The element generates a block level box, but the entire box behaves like an inline element.

display: flex;

By declaring display: flex on an element, it turns out to be a flex container, and its child elements become flex items. This does not cascade further, meaning the flex properties do not extend to the element’s grandchildren. Both the flex container and flex items have their own respective flex properties.