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
ஃ structure diagram examples
ஃ Explain Program
ஃ Output
ஃ CSS Margin Properties
ஃ Why Margin use
ஃ Syntax
ஃ CSS Margin Explained
ஃ Advantage of CSS Margin
ஃ structure diagram examples
ஃ Explain Program
ஃ Output
ஃ CSS Margin Properties
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
ஃ structure diagram examples
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>
What is CSS Margin? Syntax, Properties
Explain Program
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>....</head>
- Contains internal CSS and page- related settings.
- <head> shown directly on webpage.
- Control CSS Styles & page settings
Step 4]
CSS Styling
<style>
div {
border: 2px solid blue;
margin-top: 50px;
margin-bottom: 100px;
margin-right: 390px;
margin-left: 80px;
background-color: lightgrey;
color:brown;
}
</style>
- <div> Elements in the document.
- Create 2px blue border.
- Add 50px space above the div.
- Adds 100px space below the div.
- Add 390px space on the right reducing available width.
- Add 80px space on the left.
- Applies a light grey background to the div content area.
- Sets text color inside div to brown.
Step 5]
<body> Section
<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>
- Contains the visible content of the webpage.
- Display text inside a styled div
- <br> line break
- <div> tag CSS styles defined
Step 6]
Closing tag
</body>
</html>
Whavt is CSS Margin? Syntax, Properties
Output
Related Post :-
What is linear Gradient in CSS
What is CSS Gradient
CSS Attribute Selector Explained
No comments:
Post a Comment