Display in CSS
? display Property in CSS
The display property controls how an element is displayed in the layout — its box type and behavior in relation to other elements.
Common display Values
| Value | Description | Example Usage |
|---|---|---|
block | Element takes full width, starts on a new line (like <div>) | div, p are block by default |
inline | Element flows inline with text, width/height ignored (like <span>) | <a>, <strong> are inline by default |
inline-block | Inline flow, but can set width & height | Buttons, icons, small containers |
none | Element is not displayed (removed from layout) | Hide/show elements |
flex | Turns element into a flex container for flexible layouts | Modern layout technique |
grid | Turns element into a grid container | CSS Grid layouts |
inline-flex | Like flex, but behaves like inline element | For inline flexible containers |
table | Behaves like a <table> element | Table-like layout |
list-item | Behaves like a list item, with bullets/numbers | <li> elements |
Example Usage
/* Make all divs inline */div { display: inline;}/* Hide a button */button { display: none;}/* Flex container */.container { display: flex; justify-content: space-between;}Why display is Important
Controls element flow and box model behavior.
Essential for layout: switching between block, inline, flex, grid.
Useful for hiding/showing elements without deleting them.
If you want, I can show you examples combining display with other properties like flexbox or grid!
