हेल्लो दोस्तों! आज हम इस आर्टिकल में CSS Margin Property के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
CSS Margin Property :-
यह Margin की Shorthand Property होती हैं. जिसके द्वारा एक बार में ही सभी तरफ की Margin Declare की जाती हैं. जब इस Property द्वारा Margin Declare की जाती हैं तब Margin का क्रम इस प्रकार रहता हैं.
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
आइए ये Margin किस प्रकार अपना काम करती हैं.
- जब Margin में चार Value Declare की जाती है.
जैसे;
margin: 5px 10px 15px 20px;
तब
-
- Top Margin 5px होगी.
- Right Margin 10px होगी.
- Bottom Margin 15px होगी.
- Left Margin 20px होगी.
p {
margin: 5px 10px 15px 20px;
}
- जब Margin में तीन Value Declare की जाती है.
जैसे; margin: 5px 10px 20px; तब
-
- Top Margin 5px होगी.
- Right और Left Margin 10px होगी.
- Bottom Margin 20px होगी.
p {
margin: 5px 10px 20px;
}
- जब Margin में दो Value Declare की जाती है.
जैसे; margin: 5px 10px; तब
-
- Top और Bottom Margin 5px होगी.
- Right और Left Margin 10px होगी.
p {
margin: 5px 10px;
}
- जब Margin में एक Value Declare की जाती है. जैसे; margin: 5px; तब
- अब चारो Margin 5px की होगी.
p {
margin: 5px;
}
CSS Margin Auto Value
Margin की auto Value द्वारा Element को उसके Container में Horizontally Center कर सकते हैं. इस स्थिति में Element की Width और बाकि Space Left और Right Margin में बराबर बांट दिया जाता हैं. इसे एक उदाहरण से समझिए.
माना एक Container हैं जिसकी Width 1000px है. इस Container में एक 400px Width का div Element हैं. तो जब इस Element की Value को auto Set की जाएगी तो यह Element Container के बीचों-बीच आ जाएगा. जिसमें बाकि जगह क्रमश: Right और Left Margin द्वारा बराबर बांट ली जाएगी.
इसे Try कीजिए
<!DOCTYPE html>
<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>
