CSS Display Property

CSS Display

The display property in CSS controls how an element is displayed on a webpage. It determines the element's layout and how it interacts with other elements. Here's a breakdown of different display values and their effects:

Inline

Elements with display: inline are displayed in line with the surrounding text. They do not take up the full width of their parent element, and their height is determined by the content they hold.

.inline-element {
  display: inline;
}

Example: Links, spans, and images by default are inline elements.

Block

Elements with display: block occupy the full width of their parent element and create a new line before and after themselves. They are used for elements like paragraphs, headings, and divs.

.block-element {
  display: block;
}

Example: Divs, paragraphs, headings (h1 to h6), and lists are block elements by default.

Inline-Block

The display: inline-block value combines the features of both inline and block. Elements with this display value behave like inline elements in terms of flow (remaining in the same line), but they also allow for width and height adjustments like block elements.

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

Example: Inline-block is useful for creating blocks of content within a line while still allowing control over their dimensions and margins.

None

Elements with display: none are completely hidden from view and do not take up any space on the page. They are effectively removed from the layout.

.hidden-element {
  display: none;
}

Example: display: none is often used to hide content until a user triggers an event, such as clicking a button or hovering over an element.

Summary

• The display property controls how an element is displayed on a webpage.
• inline elements flow with surrounding text and do not take up full width.
• block elements occupy full width and create new lines.
• inline-block combines inline and block features.
• none hides an element completely.