CSS Box Model

The CSS Box Model

All HTML components can be considered as boxes. In CSS, the term "box model" is utilized when discussing plan and layout.

The CSS box demonstrate is basically a crate that folds over each HTML component. It comprises of: edges, fringes, cushioning, and the genuine content.

The picture beneath shows the crate model:

Explanation of the diverse parts:

  • Content - The substance of the case, where content and pictures appear
  • Padding - Clears a zone around the substance. The cushioning is transparent
  • Border - A fringe that circumvents the cushioning and content
  • Margin - Clears a territory outside the fringe. The edge is transparent

The box display is likewise used to ascertain the genuine width and tallness of the HTML components. . 


div {
    width: 300px;
    cushioning: 25px;
    outskirt: 25px strong navy;
    edge: 25px;
Try it yourself »

Width and Height of an Element

In request to set the width and tallness of a component effectively in all programs, you have to know how the case display works.

Assume we need to style a <div> component to have an absolute width of 350px:


div {
    width: 320px;
    cushioning: 10px;
    fringe: 5px strong gray;
    edge: 30;
Try it yourself »

Here is the math:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 30px (left + right margin)
= 370px

The absolute width of a component ought to be determined like this:

Total component width = width + left cushioning + right cushioning + left fringe + right outskirt + left edge + right margin

The all out tallness of a component ought to be determined like this:

Total component tallness = stature + top cushioning + base cushioning + top outskirt + base fringe + top edge + base margin