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;
}


<p>
  This text is in a block whereas <b>this bold text is an inline box</b>.
</p>

3.2 - A inline box will not respond to the width

HTMLelements are usually either:

The distinction of block-level vs. inline elements is used in HTMLspecifications 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

Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap