CSS block model is an essential part of web development and can help make your website look more professional. It’s a set of rules that determine how elements are laid out on the page, and it’s used to create a consistent design across all browsers. With CSS block model, you can easily control the size, position, and spacing of elements to create a unique visual experience for your visitors.
So let’s dive into the world of CSS block models and see how they can help you create amazing websites!
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;