The HTML document is considered a series of boxes that can be used to style the layout.

A pictorial representation of the CSS Box Model is shown below.

As you can see, around the actual content, the CSS box model contains Padding, Border, and Margin.

Padding in CSS

The space around the content box. You can specify the size as required.

Border in CSS

The line that separates the padding and margin. You can create dashed line, normal lines, and so on.

Margin in CSS

The space after the border till the end is shown in the image above. You can specify the size as required.

Example

<div class="div1">
		Content of div1.
</div>
<div class="div2">
		Content of div2.
</div>

In the above code, there are two div tags, each with a different box style.

The CSS applied to the above code is given below.

.div1 {
	  height:80px;
	  width:400px;
	  padding:30px;
	  border:2px solid #FF3F34;
	  margin:20px;
	  background-color:#C4334D;
	  }
.div2 {
	  height:40px;
	  width:500px;
	  padding:10px;
	  border:5px dashed #000123;
	  }