CSS Margin Property का परिचय
Element के बाहर Browser Window के बीच के खाली स्थान को Margin कहा जाता हैं। Margin दो Elements के बीच भी उपस्थित रहता हैं। Margin भी CSS Box Model का एक महत्वपूर्ण हिस्सा हैं। जिसकी सहायता से Element के चारों तरफ खाली जगह यानि Space को Define किया जाता हैं। किसी Element का Margin उस Element की Webpage में Position को निर्धारित करता हैं।
Margin का प्रभाव Readability पर भी पढता हैं। अगर Elements के बीच उपयुक्त Margin रहता हैं तो Users को पढने में परेशानी नही रहती हैं और वे पढना पसंद करते हैं। Element के लिए Individually चारों तरफ से Margin Set कर सकते हैं। जिससे उसकी Top, Bottom, Left, Right Sides से Position निर्धारित हो जाती है। Margin Value को Length, Percentage, Auto एवं Inherit द्वारा Define किया जा सकता हैं।
Different Types of Margin Property
Margin का संबंध Element Position और Readership से भी होता हैं। इसलिए Margin को Control करने के लिए CSS द्वारा कई Properties उपलब्ध करवाई गई हैं।
Margin Top Property
इस Property द्वारा किसी Element के लिए Top से Margin को Set किया जाता हैं। मतलब ऊपर से Element और Element Container या Browser Window के बीच कितना खाली स्थान रहेगा।
<html>
<head>
<title>CSS Top Margin Examples</title><style type=”text/css”>
p {
margin-top: 100px; border: 2px solid red;
}
</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph top Margin is 100px and has a red border with 2px.</p>
</body>
</html>
OUTPUT-
Margin Right Property
इस Property द्वारा किसी Element के लिए Right Margin को Set किया जाता हैं। मतलब Browser Window के दांई तरफ से Element और Element Container के बीच कितना खाली स्थान रहेगा।
<html>
<head>
<title>CSS Right Margin Examples</title><style type=”text/css”>
p {
margin-right: 100px; border: 2px solid red;
}
</style>
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph right Margin is 100px and has a red border with 2px.</p>
</body>
</html>
Margin Bottom Property
इस Property द्वारा किसी Element के लिए Bottom से Margin को Set किया जाता हैं। मतलब नीचे से Element और Element Container के बीच कितना खाली स्थान रहेगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Bottom Margin Examples</title><style type=”text/css”>
p {
margin-bottom: 100px; border: 2px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph bottom Margin is 100px and has a red border with 2px.</p>
</body>
</style>
</html>
<html>
<head>
<title>CSS Bottom Margin Examples</title><style type=”text/css”>
p {
margin-bottom: 100px; border: 2px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph bottom Margin is 100px and has a red border with 2px.</p>
</body>
</style>
</html>
OUTPUT-
Margin Left Property
इस Property द्वारा किसी Element के लिए Left Margin को Set किया जाता हैं। मतलब Browser Window के बांई तरद से Element और Element Container के बीच कितना खाली स्थान रहेगा।
<!DOCTYPE html>
<html>
<head>
<title>CSS Top Margin Examples</title><style type=”text/css”>
p {
Margin-left: 100px; border: 2px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph left Margin is 100px and has a red border with 2px.</p>
</body>
</style>
</html>
<html>
<head>
<title>CSS Top Margin Examples</title><style type=”text/css”>
p {
Margin-left: 100px; border: 2px solid red;
}
<body>
<p>This is a Paragraph. This paragraph text has written in English. This paragraph left Margin is 100px and has a red border with 2px.</p>
</body>
</style>
</html>
OUTPUT-
Margin Property
यह Margin की Shorthand Property होती हैं। जिसके द्वारा एक बार में ही सभी तरफ की Margin Declare की जाती हैं। जब इस Property द्वारा Margin Declare की जाती हैं तब Margin का क्रम इस प्रकार रहता हैं।
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
- जब Margin में चार Value Declare की जाती है। जैसे; margin: 5px 10px 15px 20px; तब
- Top Margin 5px होगी।
- Right Margin 10px होगी।
- Bottom Margin 15px होगी।
- Left Margin 20px होगी।
- जब Margin में तीन Value Declare की जाती है। जैसे; margin: 5px 10px 20px; तब
- Top Margin 5px होगी।
- Right और Left Margin 10px होगी।
- Bottom Margin 20px होगी।
- जब Margin में दो Value Declare की जाती है। जैसे; margin: 5px 10px; तब
- Top और Bottom Margin 5px होगी।
- Right और Left Margin 10px होगी।
- जब Margin में एक Value Declare की जाती है। जैसे; margin: 5px; तब
- अब चारो Margin 5px की होगी।
Margin Auto Value
Margin की Auto Value द्वारा Element को उसके Container में Horizontally Center कर सकते हैं। इस स्थिति में Element की Width और बाकि Space Left और Right Margin में बराबर बांट दिया जाता हैं। Suppose, एक Container हैं जिसकी Width 1000px है। इस Container में एक 400px Width का div Element हैं। तो जब इस Element की Value को auto Set की जाएगी तो यह Element Container के बीचों-बीच आ जाएगा। जिसमें बाकि जगह क्रमश: Right और Left Margin द्वारा बराबर बांट ली जाएगी।
<html>
<head>
<title>Margin auto Value Examples</title><style type=”text/css”>
div {
width: 400px; border: 2px solid red;margin:auto;
}
</style>
<body>
<div>This is a Paragraph under a division. This paragraph text has written in English. This paragraph Margin is auto and has a red border with 2px.</div>
</body>
</html>
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment