CSS Margin

The margin property defines the space around elements i.e, how much space should be left to the sides. It is transparent and doesn't have any background color.

You can change the margins of an element one by one for each side or can give all at once using shorthand property.

CSS Margin Properties

CSS Margin Properties	Description
margin	It sets a same margin for every side of the element.
margin-left	It only sets the left margin of an element.
margin-right	It only sets the right margin of an element.
margin-top	It only sets the top margin of an element.
margin-bottom	It only sets the bottom margin of an element.

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS margin </title>
<meta charset="UTF-8">
<style>
p{
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
border: 1px solid black;
background-color: skyblue;
}
</style>
</head>
<body>
<h2>This paragraph is not displayed with specified margin. </h2>
<p>This paragraph is displayed with specified margin.</p>
</body>
</html>

Output

CSS margin

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

Margin - Shorthand Property

CSS shorthand property shortens the code to give margins. It specifies all the margin properties for all sides at once and there would be no need to give each side's margin separately.

If four values are given:	If three values are given:
margin: 25px 50px 75px 100px;	margin: 25px 50px 75px;
top margin is 25px	top margin is 25px
right margin is 50px	left and right margins are 50px
bottom margin is 75px	bottom margin is 75px
left margin is 100px

If two values are given:	If only one value is given:
margin: 25px 50px;	margin: 25px;
top and bottom margins are 25px	all four margins are 25px
left and right margins are 50px

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Margin Property </title>
<meta charset="UTF-8">
<style>
.example {
background-color: seagreen;
margin: 50px 100px 150px 200px;
padding:10px;
}
</style>
</head>
<body>
<h3>This paragraph is not displayed with specified margin. </h3>
<p class="example">This paragraph is displayed with specified margin.</p>
</body>
</html>

Output

CSS Margin Property

This paragraph is displayed with specified margin.

CSS Margin Values

Value	Description
auto	It lets the browser calculate the horizontal margins. It equally divides the margins from the space available.
length	It specify a margin in pt, px, cm, etc.
%	It defines margin in percent values of the width of containing element.
inherit	It inherits margin from parent element.

The inherit Value

This example lets the left margin be inherited from the parent element:

Example Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Margin Inherit </title>
<meta charset="UTF-8">
<style>
#example {
border: 1px solid blue;
margin-left: 50px;
}
#inherit {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div class="container" id="example">
<p id="inherit">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
</body>
</html>

Output

CSS Margin Inherit

This is a paragraph with an inherited left margin (from the div element).

Recommended :

1 . How float work in CSS ?
2 . How to Insert Images in HTML Pages
3 . How to Add Buttons on WebPage ?
4 . CSS Box Model work

5 . How to make tooltip more Interactive using CSS
6 . Create Filter in CSS
7 . Create Bootstrap 4 Spinner
8 . Create Bootstrap 4 Spinner

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors