From the previous post you have learned to center a div and to customize the border. In this post I will discuss about the margin and padding.
Basically I will show how to...
»create two divs inside another div
»position them side by side
»fix the width and height for the child divs depending on the parent div's width and height
»add some margin for the child divs
»add some padding also
Our main goal is to create a full functional webpage, that's why we need to learn to customize the div very well. The margin, padding, height, width etc. are very important during designing a webpage.
Let's follow the steps given below, feel free to contact with me if you have any query.
Basically I will show how to...
»create two divs inside another div
»position them side by side
»fix the width and height for the child divs depending on the parent div's width and height
»add some margin for the child divs
»add some padding also
Our main goal is to create a full functional webpage, that's why we need to learn to customize the div very well. The margin, padding, height, width etc. are very important during designing a webpage.
Let's follow the steps given below, feel free to contact with me if you have any query.
Step 01 Add two more divs inside the existing one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iDhali</title>
<style type="text/css">
.container{
margin: auto;
width: 600px;
height: 300px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Left BOX
</div>
<div id="right">
Right BOX
</div>
</div>
</body>
</html>
After adding two new divs the webpage will look like the image given below. There are two lines Left BOX and Right BOX showing in the image. Because, those texts are added inside the newly added divs.
We used class="container" to target the main div and we used .container to customize the div using CSS. Similarly to target the first child div I have used class="left".
But to target the second child div I have used id="right". Using both class and id we can customize any div, heading tag, paragraph etc.
To do so, we need to use .className for a class and
#idName for an id. For example: for the main div we have used class="container" in the 17th line and that's why we have used .container{ in the 7th line.But if we would use id="container" in the 17th line, then we would have to use
#container{ in the 7th line.
Step 02 Position the divs side by side
Now first of all, we will position the divs side by side. So, we have to use some more CSS to do that. The total CSS code you need is given below.
After adding the CSS codes for the new divs the webpage will look like the image given below.
<style type="text/css">
.container{
margin: auto;
width: 600px;
height: 300px;
border: 1px solid #333;
}
.left{
border: 1px solid red;
float: left;
}
#right{
border: 1px solid blue;
float: right;
}
</style>
After adding the CSS codes for the new divs the webpage will look like the image given below.
!important
For the first child box I have used 1px red color border and for the second child box I have used 1px blue color border.
The first child div is floated at the left side using the CSS codes float: left; similarly the second child box is floated at the right side using the CSS codes float: right;
Step 03 Adding width and height for the new divs
Now add width: 298px and height: 298px for the new divs. After adding the width and height, the webpage will look like the image given below.
!important
The main div's width was 600px and height was 300px. We have added two new divs inside the container div. Remember the width of the container div is 600px. So, we can keep two divs of 300px width. But why I am using the width 298px instead of 300px?
There is a border of 1px! Don't forget that. 1px left border+298px width+1px right border=300px
That's why I have used 298px width. For the same reason, I have used 298px height also. You should try once 300px to see what happens actually.
Step 04 Adding margin for the left div
Now we will add 5px margin for the left div. So, we have to add another line margin: 5px; with the existing CSS codes we have used for the left div. After adding the margin the webpage will look like the image below.But alas! the divs are broken, why?
!important
Because, there is not sufficient space inside the parent div of class container. So, the width and height of the child divs should be decreased.
5px left margin+1px left border+288px+1px right border+5px right margin will be the new calculation. So the CSS should be.
.left{
border: 1px solid red;
float: left;
width: 288px;
height: 288px;
margin: 5px;
}
#right{
border: 1px solid blue;
float: right;
width: 288px;
height: 288px;
margin: 5px;
}
After adding the above CSS, the webpage will look like the image given below.
more...
Look, the distance of the child divs is looking odd. Because, in each side the margin is 5px, so the distance of the divs is 10px (5px right margin of the left div+5px left margin of the right div=10px).
It should be 5px like all other margin, then it will look fine. So, customize the div's CSS again following the next step.
Step 05 More customization
Change the width of the left div to 290.5px, as we need to decrease the margin 2.5 px from the right side, so the another 2.5px will be added with the width.5px left margin+1px left border+290.5px+1px right border+2.5px right margin = 300px
Similarly the calculation for the right div will be...
2.5px left margin+1px left border+290.5px+1px right border+5px right margin = 300px
So, finally the distance between the two divs will be 5px (2.5px right margin of left div + 2.5px left margin of right div = 5px) and the webpage will look like...
.container{
margin: auto;
width: 600px;
height: 300px;
border: 1px solid #333;
}
.left{
border: 1px solid red;
float: left;
width: 290.5px;
height: 288px;
margin-left: 5px;
margin-right: 2.5px;
margin-top: 5px;
margin-bottom: 5px;
}
#right{
border: 1px solid blue;
float: right;
width: 290.5px;
height: 288px;
margin: 5px 5px 5px 2.5px;
}
!important
The height, width, margin and padding value may be a fractional number like 2.5, 290.5 or 1.3 etc.
When you will use the same margin for every side (left, right, top and bottom), then the code margin: 5px; is enough to do that.
But if you want to use different margins, then you have to define the margin for every sides. For example: margin-top: 5px; , margin-right: 2.5px; etc.
Similarly you can do that by using only one line like margin: 5px 5px 5px 2.5px; Here, 2.5px is used to define the margin for the left side.
Step 06 Add some padding for the child divs
Look at the above images, the texts inside the child divs are attached with the border. To avoid this problem we have to use some padding. Lets use padding: 5px; for each div, then the webpage will look like the image given below.
Finally the CSS codes for the above page will be...
I have decreased 10px height and 10px width of the divs.
But why?
Because, I have added new CSS padding: 5px;.
To add 5px padding now the calculation will be...
5px left margin+1px left border+5px left padding+280.5px+5px right padding+1px right border+2.5px right margin = 300px width
And the height will be...
5px top margin+1px top border+5px top padding+278px+5px bottom padding+1px margin+5px bottom margin = 300px height
.container{
margin: auto;
width: 600px;
height: 300px;
border: 1px solid #333;
}
.left{
border: 1px solid red;
float: left;
width: 280.5px;
height: 278px;
margin-left: 5px;
margin-right: 2.5px;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
}
#right{
border: 1px solid blue;
float: right;
width: 280.5px;
height: 278px;
margin: 5px 5px 5px 2.5px;
padding: 5px;
}
Have you noticed?I have decreased 10px height and 10px width of the divs.
But why?
Because, I have added new CSS padding: 5px;.
To add 5px padding now the calculation will be...
5px left margin+1px left border+5px left padding+280.5px+5px right padding+1px right border+2.5px right margin = 300px width
And the height will be...
5px top margin+1px top border+5px top padding+278px+5px bottom padding+1px margin+5px bottom margin = 300px height
The concept of Padding is not clear here. Need more details about Padding.
ReplyDeleteOtherwise, all is well. :)
May I know exact where is your confusion?
Delete>>Can't you understand why padding is being used?
>>Don't you catch what has changed after adding the padding?
Let me know if any other question!