CSS Box Model

Last Updated: April 23, 2022

Every HTML element is wrapped with the CSS BOX MODEL. This box model consists of content, padding, border, and margin.

This is the CSS Box Model diagram

css box model 2
<style>
.para{
  padding: 10px 8px;
  margin : 20px 5px;
  border : 1px solid #ccc;
}
</style>
<p class="para"> Understanding CSS Box Model </p>
css model 2

content area: This is where you have the text and HTML elements are placed

padding: area around the content and this is transparent

border: the border is placed around the content and after the padding

margin: area outside the border and maintain the distance between other box models

Calculate the width and height of an element

How to calculate the width and height of the following element

<style>
.para{
  padding: 10px 8px;
  margin : 20px 5px;
  border : 1px solid #ccc;
  width: 500px;
  height: 50px;
}
</style>
<div class="para"> Calculate Width and Height </div>

Total width = width + left padding +right padding + left border width + right border width + left margin + right margin = 500 + 8 + 8 +1 + 1 + 5 + 5 = 528px

Total height = width + top padding +bottom padding + top border width + bottom border width + top margin + bottom margin = 50 + 10 + 10 +1 + 1 + 20 + 20 = 112px

Test