In this tutorial we will show you the solution of padding and margin in CSS, for an instance, we can say that both are used to provide spacing in CSS. Now, the question is that are both used for same purpose or different purposes.
If different then in which case they are used for give spacing. Hence, there are many types of questions which arises in our mind, when we come in touch with padding and margin.
So, let’s find the answers of these questions with help of this article.
Step By Step Guide On Padding And Margin In CSS :-
As, our first question is that padding and margin are used for same purpose. Its answer is both are used for give spacing but have different functionalities.
It means the origin of both is different, there uses are different, etc.
Now, if they are different then for which purpose, they are used.
For this question, let us see the example below which helps you to better understanding.
<!doctype html>
<html>
<head>
<title> CSS tutorials </title>
<style>
body{
background-color:black;
}
.marginCss {
background-color: red;
margin: 400px;
border: 20px solid white;
width:100%;
height: 80%;
}
.paddingCss {
background-color: orange;
color: green;
padding: 200px 300px;
border: 20px solid yellow;
}
</style>
</head>
<body class=”bgImage”>
<h1>
Talker’s code – CSS tutorials
</h1>
<h2>
Padding and margin in CSS
</h2>
<div class="marginCss">
this is margin div, you can see text here
<div class="paddingCss">
Padding is applied to this line which is written under paddingCss division.
</div>
</div>
</body>
</html>
- As, here we see that we that in above example we show you an example in which html and CSS codes are used.
- Let us understand the above codes step by step.
- Here, first of all we create a basic structure of html, in which we use <!DOCTYPE html> which defines the type of document. And next one is our html tags. These tags are paired tag and all the data regarding html is written inside these tags.
- After we use our head tag which is again paired tag and contains title and meta information of the webpage. The data written inside head is not showed on the webpage.
- Now, next is our title tag which defines the title of webpage. The tag which has its closing tag is known as paired tag. So, this is again paired tag.
- Now, next is body which is main tag of html. The data which we written inside body is showed in webpage. Mostly all tags which are helpful to show data or information on screen is written under body tag.
- Here, as we see that we create two div’s. In first div, we apply margin whereas in next div we apply padding. One main thing to note here that margin is always applied to outer side whereas padding is always applied to inner side at which we apply these margins and padding respectively.
- Hence, in case of first division we see that the div is far away from edges of body that’s because apply margin to this. Whereas in next case the division is near to edges but the text written inside this is far away from its edges of div. this is because we apply padding here.
- Hence, padding is used to give spacing inner side whereas margin is used to give spacing outer side. One more thing, we can also apply different margins and paddings to its all side. We will understand this in next session.
Conclusion :-
At last, in conclusion here we can say that with the help of this article we are able to understand about that what is the difference between padding and margin in CSS.
I hope this tutorial on padding and margin in CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
