CSS:
/*
We gave a red background color
We gave 30px upper spacing
We gave 20px lower spacing
We gave 15px inner space in all 4 corners
*/
.div1{background-color:red;margin-top:30px;margin-bottom:20px;padding:15px;}
/* We have given 15px inner space to the Top, Bottom, Left and Right corners separately*/
.div1{padding-top:15px;padding-bottom:15px;padding-left:15px;padding-right:15px;}
/* We gave 15px spacing separately to the Top, Bottom, Left and Right corners.*/
.div1{margin-top:15px;margin-bottom:15px;margin-left:15px;margin-right:15px;}
/*
Instead of giving them separately, we can give inner space with a single css code.
always starts from the left
Left space : 5px
Headspace: 10px
Right space : 15px
Bottom space: 20px
*/
.div1{padding:5px 10px 15px 20px;}
/*
or with 2 numbers we can separate the top edges and side edges
Top and Bottom inner space: 20px
Left and Right inner space: 10px
*/
.div1{padding:20px 10px;}
/*
We can use the same process in Margin, we can give a range with a single css code.
always starts from the left
Left Spacing : 5px
Upper Range : 10px
Right Spacing : 15px
Bottom Range : 20px
*/
.div1{margin:5px 10px 15px 20px;}
/*
or with 2 numbers we can separate the top edges and side edges
Top and Bottom spacing: 20px
Left and Right spacing: 10px
*/
.div1{margin:20px 10px;}
/*
You can center your div area when you give it width.
We gave width
We Centered the Page
*/
.div1{width:500px;margin:0 auto;}