What Is CSS Margin? Syntax, Properties, and Examples
This Blog You Will Learn
ஃ What is Margin in CSS
ஃ Why Margin use
ஃ Syntax
ஃ CSS Margin Explained
ஃ Advantage of CSS Margin
ஃ CSS Margin Properties
ஃ Explain Program
ஃ Output
What is Margin in CSS
CSS Margin is the space outside an HTML element border.
Margin creates distance between one element and other surrounding elements.
Margin controls outer spacing
Why Margin use
- Improves readability
- prevents elements from touching each other
- Helps create clean layouts
Syntax
selector
{
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;
}
CSS Margin Explained
1) one Value
margin: 20px;
- All Sides =20px
2) Two Values
margin:20px 30px;
- Top And Bottom =20px
- Left And Right = 30px
3) Three Values
margin: 20px 30px 40px;
- Top =10px
- Left& Right =20px
- Bottom =30px
4) Four Values
margin: 10px 20px 30px 40px;
- top→Right→Bottom→Left
Advantage of CSS Margin
✅Creates Space Between Elements
✅ Improves page Readability
✅ Helps in Layout Design
✅ Easy Element Positioning
✅ Supports Responsive Design
✅ Allow Individial Side Control
✅ Centers Elements Easily
✅ Cleaner and Professional UI
CSS Margin Properties
margin-top: 50px; /* space*/
margin-bottom: 100px; /* controls space below element */
margin-right: 80px; /* right side space */
margin-left: 90px; /* space left side */
What Is CSS Margin? Syntax, Properties
Examples
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
margin-top: 50px;
margin-bottom: 100px;
margin-right: 80px;
margin-left: 90px;
background-color: lightgrey;
color:brown;
}
</style>
</head>
<body>
<h2> CSS Margin Properties </h2>
<div>The margin property controls the outer spacing around HTML elements.
<br>CSS margin is all about space on the outside of an element. Think of
it as the breathing room between one element and the others aroundit.</div>
</body>
</html>
