Syntax
display: block | inline | inline-block | none | flex | grid;Examples
block vs inline vs inline-block
The fundamental difference in how each value affects layout flow.
.block { display: block; width: 200px; } /* own line, respects width */
.inline { display: inline; width: 200px; } /* flows in text, IGNORES width */
.inline-block { display: inline-block; width: 200px; } /* flows in text, respects width */Hiding Elements
display: none vs the related visibility: hidden.
.gone { display: none; } /* removed from layout entirely - other elements shift to fill the space */
.invisible { visibility: hidden; } /* stays in layout, just invisible - still takes up space */Parameters and values
- block (keyword): Starts on a new line, fills available width
- inline (keyword): Flows within text, ignores width/height
- inline-block (keyword): Flows within text but respects width/height
- none (keyword): Removes the element from layout entirely
- flex / grid (keyword): Turns the element into a flex or grid container
Best practices
- Use display: none to fully remove content from layout and accessibility tree; use visibility: hidden to hide visually while keeping the space reserved
- Remember width/height have no effect on elements with display: inline - switch to inline-block or block if you need to size them
- Default HTML elements already have sensible display values (div is block, span is inline) - only override when you have a specific layout need
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
The Box Model
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.box-sizing
box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.overflow Property
overflow controls what happens when content is too large to fit its container. visible (default) lets content spill out. hidden clips anything beyond the box. scroll always shows scrollbars. auto adds scrollbars only when needed. overflow-x and overflow-y control each axis independently.
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.box-sizing
box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.overflow Property
overflow controls what happens when content is too large to fit its container. visible (default) lets content spill out. hidden clips anything beyond the box. scroll always shows scrollbars. auto adds scrollbars only when needed. overflow-x and overflow-y control each axis independently.