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;