Block-level element
A block-level element is an HTML element that participates in block layout, normally starts on a new line, and generally occupies its container’s available width.
CSS in Depth, Second Edition
A block-level element generates block-level content that starts on its own line and normally fills the available width of its container.
- How it is used
- Uses block-level behavior to predict page layout and stack links or form controls on separate lines.
- How deep it goes
- Defines default flow and works through spacing and input-width exceptions, without detailing browser layout internals.
- Examples
- Shows paragraphs and headers in a one-column page, stacked sidebar links, and block-displayed login inputs.
- What you can do after
- Apply it via CSS `display: block` to stack links or inputs, then adjust spacing or width where needed.
Read how CSS in Depth, Second Edition explains block-level element →
Tiny CSS Projects
A block-level element is an element that participates in block layout and ordinarily occupies the available width of its containing block.
- How it is used
- Uses block layout to make publication dates, card strips, and other interface regions occupy clear horizontal space.
- How deep it goes
- Defines default flow behavior and demonstrates changing inline behavior with display: block, but does not detail block formatting internals.
- Examples
- Uses a styled publication date, an empty magnetic-strip div, and an inline-flex social-sharing container as contrasting examples.
- What you can do after
- Apply it via CSS by selecting display values that control whether an element occupies a line and the available horizontal space.
Related concepts
- inline containercontrasts with · An inline container is an HTML element that participates in inline layout, flowing with surrounding content and potentially wrapping within its containing block.
- divincludes · The HTML div element is a generic container for grouping flow content without inherent semantic meaning or specialized behavior.
- foitproduces · FOIT, or Flash of Invisible Text, is the visual effect in which text is rendered invisibly until the intended web font loads.
- normal flowpart of · Normal flow is the browser’s ordinary layout process, arranging elements according to document order and their formatting behavior without out-of-flow positioning.
- BEMpart of · BEM, or Block-Element-Modifier, is a CSS naming methodology that organizes classes around reusable blocks, their elements, and their modifiers.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.