Pavan V's Blog

🎁css Box Model🎁

🎁css Box Model🎁

Pavan V's photo
Pavan V
·

2 min read

Table of contents

CSS Box Model :

CSS Box Model is layout structure that wraps around the HTML elements. The Box Model is a combination of content, padding, margin and border.

Parts of CSS Box Model :

  • Content : It is where text and images appear. Basically all types of content in HTML.

  • Padding : It is the area around the content and area between the content and border. It is transparent.

  • Border : It covers padding and content.

  • Margin : It is the area outside the border. It is transparent.

Below image shows the CSS Box Model

BORDER.png

Consider a gift box . In this the gift/present inside the gift box is the content. Border is the box. The space between the gift/present and the edges of the box is padding. The space that is outside and around the gift box is the margin.

Working Of BOX Model :

Consider we have an image of width 350px and now to place that image inside a div perfectly we can give following properties to that div.

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Here the total width of the div is calculated as :

Total Width = width + left padding + right padding + left border + right border + left margin + right margin = 320+20+10 = 350px.

And the total height of the div is calculated as :

Total Height= height+ top padding + bottom padding + top border + bottom border + top margin + bottom margin = 320+20+10 = 350px.

So the div as width and height of 350px and the image that we have fits perfectly inside this div.

Conclusion :

CSS Box Model plays vital role in setting width and height of the elements. When we set the width and height properties of an element with CSS it is just the content area. So we also need to specify padding, borders and margins as well.

That's the end of this short blog. See you in the next one.✌

CSSiwritecodeineuron@hiteshchoudharylcobox-model