In CSS, the display property is used to control the layout behaviour of an element.
It specifies how an element is rendered in the document flow.
Elements with display: block; render as block-level elements, starting on a new line and taking up the full width available. They respect width, height, margin, and padding properties.
Elements with display: inline; render as inline elements, flowing within the text content and only taking up the space required by their content. They ignore width, height, margin-top, margin-bottom, and padding properties.
Elements with display: inline-block; render as inline elements, but they also respect width, height, margin, and padding properties like block-level elements. They flow within the text content but can have dimensions and padding.
Elements with display: none; are completely removed from the document flow and are not rendered. They occupy no space on the page. This can be used to hide elements dynamically using JavaScript or to define elements that should not be displayed by default.
Establishes a flex container for the element and its children. Flex containers enable a flex layout context, allowing children to be laid out in any direction, including horizontally and vertically, and to have their alignment and order controlled.
Establishes a grid container for the element and its children. Grid containers enable a grid layout context, allowing children to be laid out in rows and columns, and to have their alignment and order controlled.
These values are used to emulate the behavior of table elements. They can be useful for creating table-like layouts without using actual table elements.
Elements with display: list-item; render as list items, similar to
These are some of the most commonly used values for the display property in CSS.
By choosing the appropriate display value, we can control the layout and appearance of elements on your webpage, enabling a wide range of design possibilities.