In this blog we will learn CSS Box Model and its Properties with Examples.
Everything is represented by a box in CSS.
For example if we want to create a circle or we want browser to interpret our rectangular box as a circle then we can make a circle by changing the border-radius to 100%.

Box Model has 4 parts

content
padding
border
margin

Content

Everything inside the box is called content . Here whatever inside the green border , is content for outer box . Also the box inside it which has border of 0 and the content is red color for inner box.

<body>
      <div class="bigBox">
        <div class="box"></div>
      </div>
    </body>

* {
  box-sizing: border-box;
  margin: 0;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 0.15rem;
  padding-top: 2rem;
  margin: 1.5rem;
  margin-top: 1.5rem;
}

.bigBox {
  background-color: aqua;
  width: 200px;
  height: 200px;
  margin: 1rem;
  padding: 1rem;
  border: 10px solid green;
}

Padding

When we want to add extra space between our content and the border , we use padding . It is helpful when we want to add extra space without changing the content size.

Even after increasing class .bigBox padding , it has no affect on the size of content.

<body>
      <div class="bigBox">
        <div class="box"></div>
      </div>
      <div class="bigBox1">
        <div class="box1"></div>
      </div>
    </body>
  </body>

* {
  box-sizing: border-box;
  margin: 0;
}

.bigBox,
.bigBox1 {
  background-color: aqua;
  width: 200px;
  height: 200px;
  margin: 1rem;
  padding: 10rem;
  border: 10px solid green;
  border-radius: 100%;
}

.box,
.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 0.15rem;
  padding-top: 2rem;
  margin: 1.5rem;
  margin-top: 1.5rem;
  border-radius: 100%;
}

.bigBox {
  padding: 1rem;
}

Border

It is the last part of our CSS model . It ontributes to the overall size of our CSS box model. It is between the padding and outside part of that element.

<body>
    <div class="bigBox">
      <div class="box"></div>
    </div>
  </body>

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}
/* Ignore the body code for once , if you don't know flexbox */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 0.15rem;
  padding-top: 2rem;
  margin: 1.5rem;
  margin-top: 1.5rem;
  border-radius: 4px;
}

.bigBox {
  background-color: rgba(60, 183, 85, 0.376);
  width: 200px;
  height: 200px;
  margin: 1rem;
  padding: 10rem;
  border: 20px solid rgb(207, 119, 3);
  border-radius: 20px;
}

Margin

It contributes to the distance between different elements inside the body.

In normal document flow( without using float , flex , grid etc.) if we have two siblings elements have some margin then only the largest of the two margins is used as space between these two elements.
<body>
    <div class="bigBox">
<div class="box"></div>
     </div>
  </body>

* {
  box-sizing: border-box;
  margin: 0;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 0.15rem;
  padding-top: 2rem;
  margin: 1.5rem;
  margin-top: 1.5rem;

}

.bigBox {
  background-color: aqua;
  width: 200px;
  height: 200px;
  margin: 1rem;
  padding: 1rem;
  border: 10px solid green;
}

Box Sizing

Without box-sizing:border-box our component will look like this.

Even boxes are of same size , but when we change it size it only applies to content only. But if we want to change the size of any component including its border , then we use box-sizing.

<body>
      <div class="box1"></div>
      <!-- atleast add some text to make it visible or change it CSS style -->
      <div class="box2"></div>
    </body>

* {
  box-sizing: content-box; /* by default it is set to content-box */
  margin: 10px;
}

.box1 {
  background-color: blueviolet;
  width: 100px;
  height: 100px;
}

.box2 {
  background-color: rgb(12, 206, 187);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  opacity: 0.5;
  border: 6px solid red;
}

Comment if I have committed any mistake. Let's connect on my socials. I am always open for new opportunities , if I am free :P

Linkedin| Twitter | ShowwCase

Learn CSS Box Model with Examples

CSS Box Model : Content , Padding , Border , Margin

Table of contents

Content

Padding

Border

Margin

Box Sizing