CSS - Block Layout (Block Formatting context)

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.

Block Box vs Inline Block Box

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;
}
<p>
  This text is in a block whereas <b>this bold text is an inline box</b>.
</p>

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

Documentation / Reference


Powered by ComboStrap