CSS Display - Detailed Overview

Introduction to CSS Display

The CSS display property specifies how an element should be displayed on the page. It controls the layout and presentation of elements and can be used to alter the default display behavior of HTML elements.

Block Elements

Block-level elements take up the full width available and start on a new line. Example:

.display-block {
    display: block;
}

Inline Elements

Inline elements only take up as much width as necessary and do not start on a new line. Example:

.display-inline {
    display: inline;
}

This is an inline element. This is another inline element.

Inline-Block Elements

Inline-block elements are similar to inline elements but can have width and height. Example:

.display-inline-block {
    display: inline-block;
}

Hidden Elements

Elements with display: none are not visible and do not take up any space on the page. Example:

.display-none {
    display: none;
}

Flexbox Layout

Using display: flex to create flexible layouts. Example:

.display-flex {
    display: flex;
}

.flex-container {
    display: flex;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f4f4f4;
}