CSS Display Types
Block-level elements fill the entire width of their parent container and start on a new line. They stack vertically by default. Common block elements include <div>, <p>, <h1> through <h6>, <section>, and <article>.
Block elements respect all box model properties: width, height, margin, padding, and border. They participate in margin collapsing.
| 1 | /* Block is the default for many elements */ |
| 2 | div, p, h1, h2, h3, section, article, nav { |
| 3 | display: block; /* already the default, shown for clarity */ |
| 4 | } |
| 5 | |
| 6 | /* Block behavior characteristics */ |
| 7 | .block-element { |
| 8 | display: block; |
| 9 | width: 75%; /* takes 75% of parent width */ |
| 10 | height: 100px; /* explicit height allowed */ |
| 11 | margin: 16px 0; /* all margins respected, vertical collapse */ |
| 12 | padding: 12px; /* padding works on all sides */ |
| 13 | } |
| 14 | /* Starts on a new line */ |
| 15 | /* Following elements start on a new line */ |
| 16 | /* Width defaults to 100% of parent if not set */ |
Inline elements flow within the text content, sitting side-by-side on the same line. They do NOT start on a new line. Common inline elements include <span>, <a>, <strong>, <em>, and <code>.
Inline elements only respect horizontal margins and padding. Vertical margins and padding are rendered visually but do NOT affect layout flow — they can overlap with content above/below. width and height properties are ignored.
| 1 | /* Inline elements flow in text */ |
| 2 | span, a, strong, em, code { |
| 3 | display: inline; /* default for these elements */ |
| 4 | } |
| 5 | |
| 6 | /* Inline limitations */ |
| 7 | .inline-element { |
| 8 | display: inline; |
| 9 | width: 200px; /* IGNORED — inline elements can't have explicit width */ |
| 10 | height: 100px; /* IGNORED */ |
| 11 | margin-top: 20px; /* RENDERED but doesn't affect layout */ |
| 12 | margin-bottom: 20px; /* RENDERED but doesn't affect layout */ |
| 13 | margin-left: 8px; /* WORKS — horizontal margin */ |
| 14 | margin-right: 8px; /* WORKS */ |
| 15 | padding: 4px 8px; /* padding works on all sides but vertical may overlap */ |
| 16 | } |
| 17 | |
| 18 | /* Common inline element styling */ |
| 19 | .nav-link { |
| 20 | display: inline; |
| 21 | color: #A0A0A0; |
| 22 | padding: 4px 8px; |
| 23 | /* Links flow naturally in navigation text */ |
| 24 | } |
inline-block combines the flow behavior of inline with the box model of block. Elements sit on the same line (like inline) but respect width, height, and all margin/padding directions (like block).
| 1 | /* Best of both worlds */ |
| 2 | .inline-block-element { |
| 3 | display: inline-block; |
| 4 | width: 150px; /* WORKS */ |
| 5 | height: 80px; /* WORKS */ |
| 6 | margin: 12px; /* ALL margins respected — no vertical collapse */ |
| 7 | padding: 8px; /* ALL padding works */ |
| 8 | vertical-align: middle; /* controls alignment with adjacent inline elements */ |
| 9 | } |
| 10 | |
| 11 | /* Practical uses for inline-block */ |
| 12 | /* Buttons that align with text */ |
| 13 | .btn { |
| 14 | display: inline-block; |
| 15 | padding: 8px 20px; |
| 16 | background: #00FF41; |
| 17 | color: #0D0D0D; |
| 18 | border-radius: 4px; |
| 19 | } |
| 20 | |
| 21 | /* Grid-like layouts (pre-Flexbox era) */ |
| 22 | .grid-old { |
| 23 | font-size: 0; /* remove whitespace gap between inline-blocks */ |
| 24 | } |
| 25 | .grid-item { |
| 26 | display: inline-block; |
| 27 | width: 33.33%; |
| 28 | font-size: 16px; /* restore font size */ |
| 29 | vertical-align: top; |
| 30 | padding: 12px; |
| 31 | box-sizing: border-box; |
| 32 | } |
display: none removes the element from the layout entirely — it takes no space and is not rendered. visibility: hidden hides the element visually but preserves its space in the layout.
| 1 | /* display: none — completely removed from layout */ |
| 2 | .hidden-element { |
| 3 | display: none; |
| 4 | /* No box is generated. Takes zero space. */ |
| 5 | /* Like the element never existed in the HTML */ |
| 6 | } |
| 7 | |
| 8 | /* visibility: hidden — hidden but space preserved */ |
| 9 | .invisible-element { |
| 10 | visibility: hidden; |
| 11 | /* The box is still rendered in layout */ |
| 12 | /* Space is taken, but nothing is painted */ |
| 13 | /* Children can override with visibility: visible */ |
| 14 | } |
| 15 | |
| 16 | /* opacity: 0 — visually hidden, space preserved, can be interacted with */ |
| 17 | .transparent-element { |
| 18 | opacity: 0; |
| 19 | /* Fully transparent but still clickable! */ |
| 20 | /* Takes space, can receive events */ |
| 21 | } |
| 22 | |
| 23 | /* Accessibility: visually hidden but accessible to screen readers */ |
| 24 | .sr-only { |
| 25 | position: absolute; |
| 26 | width: 1px; |
| 27 | height: 1px; |
| 28 | padding: 0; |
| 29 | margin: -1px; |
| 30 | overflow: hidden; |
| 31 | clip: rect(0, 0, 0, 0); |
| 32 | white-space: nowrap; |
| 33 | border: 0; |
| 34 | } |
These are the two modern layout engines. flex is one-dimensional (row or column), while grid is two-dimensional (rows and columns simultaneously). Both create a new formatting context for their children.
| 1 | /* Flex — one-dimensional layout */ |
| 2 | .flex-container { |
| 3 | display: flex; /* block-level flex container */ |
| 4 | justify-content: space-between; |
| 5 | align-items: center; |
| 6 | gap: 16px; |
| 7 | } |
| 8 | |
| 9 | .inline-flex-container { |
| 10 | display: inline-flex; /* inline-level flex container */ |
| 11 | } |
| 12 | |
| 13 | /* Grid — two-dimensional layout */ |
| 14 | .grid-container { |
| 15 | display: grid; |
| 16 | grid-template-columns: 1fr 2fr 1fr; |
| 17 | grid-template-rows: auto; |
| 18 | gap: 24px; |
| 19 | } |
| 20 | |
| 21 | .inline-grid-container { |
| 22 | display: inline-grid; /* inline-level grid container */ |
| 23 | } |
| 24 | |
| 25 | /* Both flex and grid: */ |
| 26 | /* - Create a new formatting context */ |
| 27 | /* - Children become flex/grid items */ |
| 28 | /* - Margins don't collapse between items */ |
| 29 | /* - The gap property creates consistent spacing */ |
These two lesser-known display values solve specific layout problems. flow-root creates a new block formatting context (useful for containing floats). contents removes an element's box from the layout tree while keeping its children.
| 1 | /* flow-root — creates a new BFC (Block Formatting Context) */ |
| 2 | .clearfix { |
| 3 | display: flow-root; |
| 4 | /* Contains floated children */ |
| 5 | /* Prevents margin collapse through the element */ |
| 6 | /* Creates a new layout context */ |
| 7 | } |
| 8 | |
| 9 | /* Use flow-root instead of the clearfix hack */ |
| 10 | /* Old clearfix (don't use this anymore) */ |
| 11 | .clearfix-old::after { |
| 12 | content: ""; |
| 13 | display: table; |
| 14 | clear: both; |
| 15 | } |
| 16 | |
| 17 | /* contents — element box disappears, children inherit layout */ |
| 18 | .grid-wrapper { |
| 19 | display: contents; |
| 20 | /* This element's box is removed from the layout */ |
| 21 | /* Its children behave as if they are direct children of the parent grid */ |
| 22 | } |
| 23 | |
| 24 | /* Useful for semantic HTML without breaking layout */ |
| 25 | /* <ul> with display: contents lets <li> become direct grid children */ |
| 26 | ul.menu { |
| 27 | display: contents; /* ul box disappears */ |
| 28 | /* li elements become direct children of the grid parent */ |
| 29 | } |
info
Modern CSS supports a two-value display syntax that separates the outer display type (how the element behaves in layout flow) from the inner display type (how its children behave). This gives finer control over formatting contexts.
| 1 | /* Two-value display syntax */ |
| 2 | .element { |
| 3 | display: block flow; /* block outside, normal flow inside */ |
| 4 | display: inline flow; /* inline outside, normal flow inside */ |
| 5 | display: block flow-root; /* block outside, new BFC inside */ |
| 6 | display: inline flex; /* inline outside, flex container inside */ |
| 7 | display: block grid; /* block outside, grid container inside */ |
| 8 | display: inline table; /* inline outside, table inside */ |
| 9 | } |
| 10 | |
| 11 | /* These are equivalent to the legacy single values */ |
| 12 | display: block; /* = display: block flow */ |
| 13 | display: inline; /* = display: inline flow */ |
| 14 | display: flow-root; /* = display: block flow-root */ |
| 15 | display: flex; /* = display: block flex */ |
| 16 | display: inline-flex; /* = display: inline flex */ |
| 17 | display: grid; /* = display: block grid */ |
| 18 | display: inline-grid; /* = display: inline grid */ |
| 19 | |
| 20 | /* Practical example: inline flex container */ |
| 21 | .inline-flex-center { |
| 22 | display: inline-flex; /* inline outside, flex inside */ |
| 23 | align-items: center; |
| 24 | gap: 8px; |
| 25 | /* The container flows inline, but it's a flex container internally */ |
| 26 | } |
best practice