CSS Display Property

Interactive Demo

What is Display?

The display property in CSS defines how an element is displayed in the document.
There are several display types:
block: element take all the width and always start in a new line
inline: elements are placed horizontally, taking only the space they need. You cannot set their width or height.
inline-block: similar to inline, but you can adjust the element s width and height.
none: completely removes the element from the document flow; it will not be visible and won’t take up space.
flex: allows you to arrange child elements in a single dimension (horizontal or vertical). You can control their size, position, and spacing.
grid: enables two-dimensional layouts, letting you control both rows and columns to arrange elements horizontally and vertically.

Display Types

Visual Example: Block

Live Preview

Block Element 1

Block Element 2

Block Element 3

CSS Code

styles.css

/* Block elements stack vertically */
.block-element {
  display: block;
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  background: #3b82f6;
}

Key Points

Takes up the full width of its container

Always starts on a new line

Can have width, height, margin, and padding