Home » CSS » Box Model In Css – what is meant by box model in css?

Box Model In Css – what is meant by box model in css?

in this lecture we learn about box model in css.
All HTML components can be considered as boxes. In CSS, the expression “box model” is utilized when discussing plan and design. 

The CSS box display is basically a case that wraps around each HTML component. It comprises of: edges, outskirts, cushioning, and the genuine substance. The picture beneath outlines the crate display:-

box model

Clarification of the diverse parts:-

  • Content – The substance of the box, where content and pictures show up
  • padding – Clears a zone around the substance. The cushioning is straightforward
  • Border – A fringe that circumvents the cushioning and substance 
  • Margin – Clears a zone outside the Border. The Magin is straightforward
The container show enables us to include a border around elements, and to characterize space between elements.

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;

Width and Height:-

Keeping in mind the end goal to set the width and height of a element accurately in all browsers, you have to know  how the box model works.
Critical: When you set the width and height properties of a element with CSS, you simply set the width and height of the content zone. To figure the full size of a component, you should likewise include padding, borders and Margin.
Expect we need to style a <div> component to have an aggregate width of 500px:
Calculation of the above Example:-
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The aggregate width of an element should be computed this way:-
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The aggregate height of an element should be figured this way:-
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Note for old IE: internet Explorer 8 and earlier versions, incorporate padding and border in the width property. To fix this issue, add a <!DOCTYPE html> to the HTML page.
You Can Also Visit: Text Style Color in Css.

Leave a Reply

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


error: Sorry You Have Not Permission To Copy!