CSS – 02 Box Model


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;

Leave a Reply

Your email address will not be published. Required fields are marked *