Demonstrating the Box Model

What better way to showcase the fundamental elements of CSS than starting with the most basic tags styled with CSS.

Box Model

The CSS box model is essentially a box that wraps around every HTML element.

The content of the box has:

  • 2em padding
  • 20px margin
  • Border 2em Tomato Solid

CSS Values:

  • Width = 100%
  • background-color: LightSteelBlue;
  • padding: 2em;
  • border: 4px solid tomato;
  • background-color: LightSteelBlue;
  • box-shadow: inset 0.2em 0.2em steelblue;

Demonstrating Box Model with Grid and Flex

Column One

Column One

Column One

CSS Values:

  • grid-template-columns: repeat(3, 1fr)
  • grid-template-rows: 100px;
  • column-gap: 10px;
  • border: 4px solid tomato;
  • background-color: LightSteelBlue;
  • display: flex;