The Box Model

The components that can be depicted on the web page consist of one or more than one rectangular box.

A CSS box model is a compartment that includes numerous assets, such as edge, border, padding and material. It is used to develop the design and structure of a web page. It can be used as a set of tools to personalize the layout of different components. According to the CSS box model, the web browser supplies each element as a square prism.

The following diagram illustrates how the CSS properties of width, height, padding, border and margin dictate that how much space an attribute will occupy on a web page.

The CSS box model contains the different properties in CSS. These are listed below.

Content

The element's actual content may be text, photos, or videos.

Border

The line that frames the element's padding and content. Borders may be customized in terms of size, look, and colour.

•    .box {
        border-top: 1px solid black;
        border-right: 2px dotted blue;
        border-bottom: 3px dashed green;
        border-left: 4px solid red;
      }
  
      .box{
        margin: 20px 10px 25px 15px;
      }
  

Padding

The distance between an element's border and its content. A particular size for the padding may be chosen, or it can be calculated as a percentage of the element's width or height.

.box {
      padding-top: 15px;
      padding-right: 12px;
      padding-bottom: 30px;
      padding-left: 14px;
  }

  .box {
      padding: 5px 2px 3px 4px;
  }

  .box {
    padding: 10px 0;
  }

Margin

The area between an element's border and its surrounding components. Moreover, margins can be configured to be a certain size or proportion of the element's width or height.

.box {
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 25px;
    margin-left: 15px;
  }
  .box {
      margin: 20px 10px 25px 15px;
  }

Thank you...