In this article, we will learn about the CSS Margin & Padding properties of the Box Model & understand their implementation through the example.
CSS Margins: CSS margins are used to create space around the element. We can set the different sizes of margins for individual sides(top, right, bottom, left).
Margin properties can have the following values:
- Length in cm, px, pt, etc.
- Width % of the element.
- Margin calculated by the browser: auto.
Syntax:
body {
margin: value;
}
The margin property is a shorthand property having the following individual margin properties:
- margin-top: It is used to set the top margin of an element.
- margin-right: It is used to set the right margin of an element.
- margin-bottom: It is used to specify the amount of margin to be used on the bottom of an element.
- margin-left: It is used to set the width of the margin on the left of the desired element.
Note: The margin property allows negative values.
We will discuss all 4 properties sequentially.
If the margin property has 4 values:
margin: 40px 100px 120px 80px;
- top = 40px
- right = 100px
- bottom = 120px
- left = 80px
Example: This example describes the margin property by specifying the four values.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 80px 100px 50px 80px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p> Margin properties </p>
</body>
</html>
|
Output:
If the margin property has 3 values:
margin: 40px 100px 120px;
- top = 40px
- right and left = 100px
- bottom = 120px
Example: This example describes the margin property by specifying the three values.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 80px 50px 100px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>
Margin properties
</p>
</body>
</html>
|
Output:
If the margin property has 2 values:
margin: 40px 100px;
- top and bottom = 40px;
- left and right = 100px;
Example: This example describes the margin property by specifying the double value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 100px 150px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>
Margin properties
</p>
</body>
</html>
|
Output:
If the margin property has 1 value:
margin: 40px;
- top, right, bottom and left = 40px
Example: This example describes the margin property by specifying the single value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 100px 150px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>
Margin properties
</p>
</body>
</html>
|
Output:
CSS Padding: CSS paddings are used to create space around the element, inside any defined border. We can set different paddings for individual sides(top, right, bottom, left). It is important to add border properties to implement padding properties.
Padding properties can have the following values:
- Length in cm, px, pt, etc.
- Width % of the element.
Syntax:
body {
padding: value;
}
The padding CSS shorthand property can be used to specify the padding for each side of an element in the following order:
- padding-top: It is used to set the width of the padding area on the top of an element.
- padding-right: It is used to set the width of the padding area on the right of an element.
- padding-bottom: It is used to set the height of the padding area on the bottom of an element.
- padding-left: It is used to set the width of the padding area on the left of an element.
Note: The padding property doesn’t allows the negative values.
We will discuss all these 4 properties sequentially.
If the padding property has 4 values:
padding: 40px 100px 120px 80px;
- top = 40px
- right = 100px
- bottom = 120px
- left = 80px
Example: This example describes the padding property by specifying the 4 values.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 80px 100px 50px 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
|
Output:
If the padding property has 3 values:
padding: 40px 100px 120px;
- top = 40px
- right and left = 100px
- bottom = 120px
Example: This example describes the padding property by specifying the 3 values.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 80px 50px 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
|
Output:
If the padding property has 2 values:
padding: 100px 150px;
- top and bottom = 100px;
- left and right = 150px;
Example: This example describes the padding property using a double value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 100px 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
|
Output:
If the padding property has 1 value:
padding: 100px;
- top, right, bottom and left = 100px
Example: This example describes the padding property using a single value.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
|
Output:
Difference between Margin and Padding:
- Margin is used to create space around elements and padding is used to create space around elements inside the border.
- We can set the margin property to auto but we cannot set the padding property to auto.
- In Margin property we can allow negative or float number but in padding we cannot allow negative values.
- Margin and padding target all 4 sides of the element. Margin and padding will work without the border property also. The difference will be more clear with the following example.
Example: This example describes the margin & padding properties around the content.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin: 50px;
border: 70px solid green;
padding: 80px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Padding properties
</h2>
</body>
</html>
|
Output:
Supported Browser:
- Google
- Microsoft Edge
- Firefox
- Opera
- Safari