CSS Tutorial
CSS Display Property
The display property in CSS defines how an element is displayed on a web page. It controls layout behavior — whether elements sit next to each other, break into a new line, act as blocks, inline items, or flexible layouts.
Examples
.box {
display: flex;
justify-content: center;
align-items: center;
}
Common display Values
| Value | Description |
|---|---|
| block | Starts on a new line and takes full width |
| inline | Does not start on a new line; takes only needed width |
| inline-block | Inline element but allows setting width/height |
| none | Completely hides the element |
| flex | Enables Flexbox layout |
| inline-flex | Inline version of flex layout |
| grid | Enables Grid layout |
| inline-grid | Inline version of grid layout |
| table | Makes the element behave like a table |
| list-item | Behaves like a list item |