Block-level element

As explained in 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.

A block-level element participates in block layout: it starts on a new line and ordinarily occupies the full available width of its containing block. Elements such as <div>, <p>, and <ul> behave this way unless a width changes the result. section 4.1.5

The CSS display property can change an element’s flow behavior. Applying display: block to an inline element makes it start on its own line and expand across the available width. section 4.1.5

Making a publication date span the page

A <time> element is inline by default, so it occupies only the space needed by its text. Setting time { display: block; text-align: center; border-top: 3px solid #333333; border-bottom: 3px solid #333333; padding: 12px 0; } makes the date span the page, centers its text, and creates a visual divide above the article. section 4.1.5

An empty div filling a card

An empty div used for a credit-card magnetic strip still automatically takes the available width because div is block-level. A height, background color, and padding on the card can then create and position the strip. section 9.2.3

Figure 4.8 The <time> element exhibiting block behavior

Compare the <time> element after it changes from inline behavior to block behavior. section 4.1.5

How Tiny CSS Projects covers it

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.

How it connects

Connects block-level elements with inline-level elements, the display property, Flexbox, and component styling.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  CSS in Depth, Second EditionA block-level element generates block-level content that starts on its own line and normally fills the available width of its container.

Compare how 2 books explain block-level element →

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.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.