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