butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
44eff1afa3
kb/data/developer.mozilla.org/en-US/docs/Glossary/Block-level_content-0.md

11 KiB
Raw Blame History

title chunk source category tags date_saved instance
Block-level content - Glossary | MDN 1/3 https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content reference web, html, css, javascript, documentation 2026-05-05T05:25:17.439524+00:00 kb-cron

MDN HTML HTML: Markup language

HTML reference

HTML guides

Markup languages

CSS CSS: Styling language

CSS reference

CSS guides

Layout cookbook

JavaScriptJS JavaScript: Scripting language

JS reference

JS guides

Web APIs Web APIs: Programming interfaces

Web API reference

Web API guides

All All web technology

Technologies

Topics

Learn Learn web development

Frontend developer course

Learn HTML

Learn CSS

Learn JavaScript

Tools Discover our tools

About Get to know MDN better

Blog

  1. Glossary
  2. Block-level content

Block-level content

In CSS, content that participates in block layout is called block-level content. In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block. Each box's left outer edge touches the left edge of the containing block.
A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block". Note: The above behavior of block layout changes if the containing block's writing-mode is set to value other than the default value. Note: HTML (HyperText Markup Language) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.

In this article

Examples

In this example, two paragraph (<p>) elements are put in a <div>. The paragraph(<p>) elements are block-level by default. That is why they are displayed in block layout:

See also