CSS - Block Layout

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Block Layout

1 - About

The block formatting context is one of the 4 layout of CSS.

This section talk about box as defined in CSS 2.1 that responds to properties such as:

This kind of box exist roughly in two fashion:

See below for an example.

This articles talks about the term “block” in a visual formatting context. See block script for the definition of a block in a CSS script.


3 - Block Box vs Inline Block Box

3.1 - An inline box will not go to the next line

Inline block are different from block box in that inline block are part of the content of a tag.

The b tag below is an in-line box whereas the p tag is a block box.

b {
   border: 1px solid aqua;
p {
   border: 1px solid DeepSkyBlue;
   padding: 1rem;
  This text is in a block whereas <b>this bold text is an inline box</b>.

3.2 - A inline box will not respond to the width

HTML elements are usually either:

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The “inline” corresponds roughly to phrasing content.

.coloredBox {
	width: 20px; 
	height: 20px; 
	border-left: 4px solid aqua;
	border-right: 4px solid red;
	border-bottom: 4px solid black;
	border-top: 4px solid blue;
  • A block box will take the width property into account.
<p>A block box will take the width property into account.</p>
<p class="coloredBox"></p>
  • But a inline box will not respond to the width.
<p>But a inline box will not respond to the width.</p>
<span class="coloredBox"></span>

The p element renders by default as a block box whereas the span element renders default as a inline box