CSS Box Model

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

A pictorial representation of CSS Box Model is shown below.

CSS Box Model

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 line and so on.

Margin in CSS

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


Example

CSS Box Model Example


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

Preview

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;
	  }
		

Next Lesson > CSS Float