Skip to main content

Display Attributes in CSS

Display attributes in CSS provide control over how an element should be presented on the page. In this guide, we will delve into several of these attributes, their definitions, and code examples.

Inline​

The inline display value in CSS renders an element on the same line with other elements and does not start a new line. It does not respect top or bottom margins or padding.

.span-text {
  display: inline;
}

In the above example, the .span-text class will cause any elements with it applied to appear inline with other elements. This is ideal for elements like <span> and <a>, as they can smoothly blend into a block of text. For more advanced selection techniques, visit our guide on CSS selectors.

Block​

The block display value causes an element to start on a new line and fill up the available horizontal space.

.div-block {
  display: block;
}

This creates a "block" of content that is separated from other elements. Elements with this display value, like <div> and <h1>, cause a line break before and after them. To learn more about how this affects the layout and the box model, check our guide on the CSS Box Model.

Flex​

The flex display value establishes a flex formatting context for its contents. This is a one-dimensional layout method, perfect for items requiring alignment in rows or columns.

.flex-container {
  display: flex;
}

By setting display: flex on the .flex-container class, child elements become flex items. They can then be controlled and aligned easily along a single line.

Grid​

The grid value initiates a grid formatting context. It's a powerful two-dimensional system, handling both columns and rows.

.grid-container {
  display: grid;
}

This display: grid declaration on the .grid-container class allows us to position elements in a two-dimensional grid layout. Grids are incredibly flexible, providing control over rows and columns simultaneously.

Inline-block​

The inline-block display value allows elements to sit inline with others but still respect padding and margins.

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

With this property, the .inline-block-element class will allow elements to be placed inline, similar to inline, but also respect padding and margins, like block. This hybrid display value offers more precise control over layout and spacing.

Inline-flex​

The inline-flex display value places the flex container inline with other elements.

.inline-flex-container {
  display: inline-flex;
}

In this case, the .inline-flex-container class allows a flex container to exist inline with other elements. It combines the behaviors of flex and inline.

Inline-grid​

The `inline-grid display value makes the grid container inline with other elements.

.inline-grid-container {
  display: inline-grid;
}

The .inline-grid-container class applies an inline grid layout, effectively creating a blend of grid and inline.

Inline-table​

The inline-table value behaves like an inline element and a

table.

.inline-table-element {
  display: inline-table;
}

This property makes an element with the .inline-table-element class behave like a table while sitting inline with other elements.

List-item​

The list-item value makes an element behave like a list item.

.list-item-element {
  display: list-item;
}

By applying display: list-item to the .list-item-element class, the elements become list items and typically display a bullet point.

None​

The none value ensures that an element will not be displayed.

.hidden-element {
  display: none;
}

Using display: none on the .hidden-element class will effectively hide the elements from the page, making them completely invisible and non-interactable.

Initial​

The initial value sets the display property to its default value.

.initial-element {
  display: initial;
}

The .initial-element class with display: initial will reset the display property to its default value, effectively undoing any prior display declarations for elements with this class.

Inherit​

The inherit value allows an element to inherit the display property from its parent element.

.inherit-element {
  display: inherit;
}

With display: inherit on the .inherit-element class, elements will adopt the display value of their parent element. This can streamline code by reducing repetition and improving readability.

To dive deeper into how display properties can affect the positioning of your elements, you may wish to explore our guide on CSS positioning. Understanding how these CSS display properties work is key to mastering CSS and creating layouts that are dynamic, responsive, and intuitive.