CSS - Block And Inline Layout (Block Formatting context)

About

Block and inline layout is the first layout model of CSS.

It's also known as:

  • block formatting 1)
  • flow layout

The component are laid out in the direction of the natural language known as the flow or normal flow.

The boxes that takes part to this layout have roughly two types::

This box responds to properties such as:

This articles talks about the term “block” in a visual formatting context. It does not talk about the css declaration block script found in a CSS script (stylesheet).

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

Task Runner