CSS Tutorial

CSS display Property

The display property specifies how an HTML element is displayed on the page. It is one of the most important layout properties in CSS.

🔹 Common Values:

• block – Element takes full width and starts on a new line.
• inline – Element fits within content flow, doesn't start on a new line.
• inline-block – Like inline but allows setting height and width.
• none – Hides the element completely.
• flex – Enables flexible layouts (covered in Flexbox section).

🧪 Live Example:

Below are three boxes using display: inline-block. They sit next to each other:

💡 CSS Code:

.box {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 5px;
}

📌 Notes:

• display: none; removes the element from layout (not just hiding it).
• inline-block lets you style elements like blocks without breaking the line.
• Understanding display is crucial for building modern responsive layouts.