Many students are confused about the concept of Margin and Padding. But after reading this post all your confusion will be cleared. Many students have this question in their mind what is margin in CSS and what is the use of margin in CSS?
Definition of Margin in CSS
Margin is a space around elements, outside of any defined borders. This means space outside the border is called a Margin.
In the above diagram, there is an HTML Element, like <p>,<h1> etc. There is a border for the element. Outside/around the space of that border is a Margin. Each element has 4 borders. We will discuss now about that.
CSS Margin Properties
CSS has properties to specify the margin for each side of an element.
| Property | Description | Example |
|---|---|---|
| margin-top | Sets the top margin of an element | margin-top: 100px; |
| margin-bottom | Sets the bottom margin of an element | margin-bottom: 100px; |
| margin-left | Sets the left margin of an element | margin-left: 100px; |
| margin-right | Sets the right margin of an element | margin-right: 100px; |
If you want to set a margin on all four sides of an element, you need to set all four margins like margin-top, margin-bottom, margin-left, and margin-right. Like as below.
<html>
<head>
<style>
p {
margin-top: 150px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 40px;
}
</style>
</head>
<body>
<p>This p element has a top margin of 150px, a right margin of 150px, a bottom margin of 100px, and a left margin of 40px.</p>
</body>
</html>We have declared 4 properties only for a single p element. So this is not a good practice. For this, there is one solution, the solution below.
Difference Between Margin and Padding in CSS
Margin shorthand CSS
To reduce the code, specify all properties in one property. All properties are specified in a single property, which is a shorthand property of margin CSS.
<html>
<head>
<style>
p {
margin: 30px 60px 90px 120px;
}
</style>
</head>
<body>
<p>This p element has a top margin of 30px, a right margin of 60px, a bottom margin of 90px, and a left margin of 120px.</p>
</body>
</html>We have given 4 side margins in a single property instead of 4 separate properties. In the above example, top margin is 30px, right margin is 60px, bottom margin is 90px and left margin is 120px we have given in a single property. It is a use of shorthand property.
Note: Negative values are allowed.
margin-top: -20px; // It is allowed.
Follow Us on Telegram
Follow Quiz Lancer Telegram Channel to solve daily interview questions. We share important interview questions which are asked in the interview. Most of the students get good values from this channel and got selected as a developer.
Interview Questions on Margin in CSS
If you want to become a web designer, then CSS Margin is a very important concept. In an interview, many questions are asked about Margin. Below are the questions which are asked in the interview. You should solve the quiz as many times as possible and practice paddling.
What is the difference between “float” and “margin” in CSS?
Float specifies whether an element should move to the right, left, or not at all. And positioning elements ignore the float property. Elements next to the float will flow around it.
Margin specifies whether an element should move top, right, bottom, and left or position in the center of its parent element. And it can also take different property values.
