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. .
outskirt: 25px strong navy;
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:
fringe: 5px strong gray;
Here is the math:
+ 20px (left + right padding)
+ 10px (left + right border)
+ 30px (left + right margin)
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