CSS Margin
The margin is the area that encloses an element beyond its border.
Syntax:
.selector
{
margin: value;
}
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Margin
</title>
</head>
<body>
<p class="para1">This is a paragraph with 12px margin.</p>
</body>
</html>
CSS
.para1
{
border: 2px solid black;
margin: 12px;
}
Output
Individual sides margin
CSS allows you to set the margin for each side of an element:
- margin-top
- margin-right
- margin-bottom
- margin-left
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Margin
</title>
</head>
<body>
<p
class="para1">
This paragraph has a top margin of 40px, a right margin of 60px, a
bottom margin of 70px, and a left margin of 80px.
</p>
</body>
</html>
CSS
.para1
{
border: 2px solid black;
margin-top: 40px;
margin-right: 60px;
margin-bottom: 70px;
margin-left: 80px;
}
Output
Margin shorthand property
Example:
HTML
<!DOCTYPE
html>
<html>
<head>
<title>
CSS Margin
</title>
</head>
<body>
<p
class="para1">
This paragraph has a top margin of 40px, a right margin of 60px, a
bottom margin of 80px, and a left margin of 100px.
</p>
</body>
</html>
CSS
.para1
{
border: 2px solid black;
margin: 40px 60px 80px 100px;
}
Output
