CSS
Topperworld.in
Margin and Padding
CSS Margins
• CSS Margin property is used to define the space around elements.
• It is completely transparent and doesn't have any background color. It clears
an area around the element.
• Top, bottom, left and right margin can be changed independently using
separate properties.
• You can also change all properties at once by using shorthand margin
property.
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;
}
❖ CSS Margin Properties
Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
©Topperworld
CSS
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin- It is used to set bottom margin of an element.
bottom
❖ CSS Margin Values
These are some possible values for margin property.
Value Description
auto This is used to let the browser calculate a margin.
length It is used to specify a margin pt, px, cm, etc. its default value is 0px.
% It is used to define a margin in percent of the width of containing
element.
inherit It is used to inherit margin from parent element.
Note: The margin property allows negative values.
If the margin property has 4 values:
margin: 40px 100px 120px 80px;
• top = 40px
• right = 100px
• bottom = 120px
• left = 80px
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 80px 100px 50px 80px;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
<p> Margin properties </p>
</body>
</html>
Output:
©Topperworld
CSS
If the margin property has 3 values:
margin: 40px 100px 120px;
• top = 40px
• right and left = 100px
• bottom = 120px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 80px 50px 100px;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
<p>
Margin properties
</p>
</body>
</html>
©Topperworld
CSS
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.
Syntax:
body {
padding: value;
}
❖ CSS Padding Properties
Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.
©Topperworld
CSS
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.
❖ CSS Padding Values
Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.
Note: The padding property doesn’t allows the negative values.
If the padding property has 4 values:
padding: 40px 100px 120px 80px;
• top = 40px
• right = 100px
• bottom = 120px
• left = 80px
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 80px 100px 50px 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Topper World</h1>
<p>Padding properties</p>
</body>
</html>
Output:
©Topperworld
CSS
If the padding property has 3 values:
padding: 40px 100px 120px;
• top = 40px
• right and left = 100px
• bottom = 120px
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 80px 50px 100px;
border: 1px solid black; }
</style>
</head>
<body>
<h1>Topper World </h1>
<p>Padding properties</p>
</body>
</html>
Output:
©Topperworld
CSS
❖ 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.
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin: 50px;
border: 70px solid green;
padding: 80px;
}
</style>
</head>
<body>
<h1>Topper World</h1>
<h2>
Padding properties
</h2>
</body>
</html>
©Topperworld
CSS
Output:
©Topperworld
