CSS display

The CSS display property specifies the type of box a certain element should generate. It controls how elements are displayed on a web page. There are various values for the display property that can be used to style elements in different ways.

Here are some common values for the display property:

block: This value makes an element generate a block-level box.
inline: This value makes an element generate an inline box.
inline-block: This value makes an element generate an inline-level block container.
none: This value makes an element not generate any box at all.

Let's see examples of how these values work in practice.

Result:


    Block Level Element
    Inline Element
    Inline Block Element
    None Element

In the example above:

The element with display: block; property generates a block-level box, taking up the full width available.
The element with display: inline; property generates an inline box, adjusting its width based on the content inside.
The element with display: inline-block; property generates an inline-level block container, allowing for block-level styling with inline positioning.
The element with display: none; property does not generate any box at all, making it invisible on the page.

Experiment with different values for the display property to see how they affect the layout of elements on a web page.