| CARVIEW |
Select Language
HTTP/2 302
x-cloud-trace-context: 3a9e0a43fa5c2672195b860093a39e39
location: /en-US/docs/Web/HTML/Block-level_elements
via: 1.1 google, 1.1 varnish, 1.1 varnish, 1.1 varnish, 1.1 varnish
accept-ranges: bytes
cache-control: no-store
server: Google Frontend
content-type: text/plain; charset=utf-8
date: Sun, 28 Dec 2025 15:16:48 GMT
x-served-by: cache-bfi-krnt7300072-BFI, cache-bfi-krnt7300056-BFI, cache-sin-wsss1830052-SIN, cache-bom-vanm7210075-BOM
x-cache: MISS, MISS, MISS, MISS
x-cache-hits: 0, 0, 0, 0
x-timer: S1766935008.722198,VS0,VE305
vary: Accept
content-length: 63
HTTP/2 301
server: Google Frontend
location: /en-US/docs/Glossary/Block-level_content
via: 1.1 google, 1.1 varnish, 1.1 varnish, 1.1 varnish
x-cloud-trace-context: 8ccb1f5b36fdd4ad38a79b5a531100d5
cache-control: max-age=2592000,public
content-type: text/plain; charset=utf-8
accept-ranges: bytes
age: 990137
date: Sun, 28 Dec 2025 15:16:48 GMT
x-served-by: cache-sin-wsss1830040-SIN, cache-sin-wsss1830064-SIN, cache-bom-vanm7210075-BOM
x-cache: MISS, HIT, MISS
x-cache-hits: 0, 29, 0
x-timer: S1766935008.041033,VS0,VE52
vary: Accept
content-length: 74
HTTP/2 200
x-guploader-uploadid: AHVrFxPunDiNyNWAXPWqWDiBJAScon2xU_qJhGEx4wNwDA9a6-cjHGg_lkOWvjkl3xT-vYBaPB6MOE8
cache-control: public, max-age=3600
x-goog-hash: crc32c=yDrM/g==, md5=xKZ+28mBmMMqD24lmz4fyw==
x-cloud-trace-context: 64cc8ba5f2a6ffa1f6ce88661c5a2fa9
x-frame-options: DENY
via: 1.1 google, 1.1 varnish, 1.1 varnish, 1.1 varnish, 1.1 varnish
server: Google Frontend
expires: Sun, 28 Dec 2025 12:07:56 GMT
last-modified: Sun, 28 Dec 2025 01:08:58 GMT
x-goog-stored-content-length: 177440
x-goog-metageneration: 1
strict-transport-security: max-age=63072000
x-goog-meta-goog-reserved-file-mtime: 1766882764
x-content-type-options: nosniff
x-goog-storage-class: STANDARD
x-goog-stored-content-encoding: identity
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
content-type: text/html
referrer-policy: strict-origin-when-cross-origin
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://*.googletagmanager.com assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://*.googletagmanager.com assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' mdn.github.io *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
etag: "c4a67edbc98198c32a0f6e259b3e1fcb"
x-goog-generation: 1766884138550045
content-encoding: gzip
accept-ranges: bytes
age: 450
date: Sun, 28 Dec 2025 15:16:48 GMT
x-served-by: cache-bfi-kbfi7400118-BFI, cache-bfi-kbfi7400118-BFI, cache-sin-wsss1830090-SIN, cache-bom-vanm7210075-BOM
x-cache: MISS, HIT, HIT, MISS
x-cache-hits: 0, 2, 0, 0
x-timer: S1766935008.106745,VS0,VE357
vary: Accept-Encoding
content-length: 25428
Block-level content - Glossary | MDN
Toggle sidebar
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.
Examples
In this example, two paragraph (<p>) elements are put in a <div>.
html
<div>
<p>
This the first paragraph. The background color of these paragraphs have been
colored to distinguish them from their parent element.
</p>
<p>This is the second paragraph.</p>
</div>
The paragraph(<p>) elements are block-level by default. That is why they are displayed in block layout:
p {
background-color: #8abb55;
}
See also
- Related glossary terms:
- Block formatting context
displaywriting-mode