सीएसएस मार्जिन

मार्जिन का उपयोग किसी भी परिभाषित सीमाओं के बाहर तत्वों के चारों ओर जगह बनाने के लिए किया जाता है।

इस तत्व का मार्जिन 70px है।

सीएसएस मार्जिन

CSS marginगुणों का उपयोग किसी भी परिभाषित सीमाओं के बाहर, तत्वों के चारों ओर स्थान बनाने के लिए किया जाता है।

CSS के साथ, आपका मार्जिन पर पूरा नियंत्रण होता है। तत्व के प्रत्येक पक्ष (ऊपर, दाएं, नीचे और बाएं) के लिए मार्जिन सेट करने के गुण हैं।

मार्जिन - व्यक्तिगत पक्ष

CSS में तत्व के प्रत्येक पक्ष के लिए मार्जिन निर्दिष्ट करने के गुण हैं:

margin-top
margin-right
margin-bottom
margin-left

सभी मार्जिन गुणों में निम्नलिखित मान हो सकते हैं:

ऑटो - ब्राउज़र मार्जिन की गणना करता है
लंबाई - पीएक्स, पीटी, सेमी, आदि में एक मार्जिन निर्दिष्ट करता है।
% - युक्त तत्व की चौड़ाई के% में मार्जिन निर्दिष्ट करता है
इनहेरिट - निर्दिष्ट करता है कि मार्जिन मूल तत्व से विरासत में मिला होना चाहिए

युक्ति: नकारात्मक मानों की अनुमति है।

उदाहरण

<p> तत्व के सभी चार पक्षों के लिए अलग-अलग मार्जिन सेट करें:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

मार्जिन - आशुलिपि संपत्ति

कोड को छोटा करने के लिए, एक संपत्ति में सभी मार्जिन गुणों को निर्दिष्ट करना संभव है।

संपत्ति निम्नलिखित व्यक्तिगत मार्जिन गुणों के marginलिए एक आशुलिपि संपत्ति है:

margin-top
margin-right
margin-bottom
margin-left

तो, यहां बताया गया है कि यह कैसे काम करता है:

यदि marginसंपत्ति के चार मान हैं:

मार्जिन: 25px 50px 75px 100px;
- शीर्ष मार्जिन 25px . है
- दायां हाशिया 50px . है
- निचला मार्जिन 75px . है
- बायां हाशिया 100px . है

उदाहरण

मार्जिन शॉर्टहैंड प्रॉपर्टी का उपयोग चार मानों के साथ करें:

p {
margin: 25px 50px 75px 100px;
}

यदि marginसंपत्ति के तीन मान हैं:

मार्जिन: 25px 50px 75px;
- शीर्ष मार्जिन 25px . है
- दाएं और बाएं हाशिये 50px . हैं
- निचला मार्जिन 75px . है

उदाहरण

मार्जिन शॉर्टहैंड प्रॉपर्टी का उपयोग तीन मानों के साथ करें:

p {
margin: 25px 50px 75px;
}

यदि marginसंपत्ति के दो मान हैं:

मार्जिन: 25px 50px;
- ऊपर और नीचे का मार्जिन 25px . है
- दाएं और बाएं हाशिये 50px . हैं

उदाहरण

मार्जिन शॉर्टहैंड प्रॉपर्टी का उपयोग दो मानों के साथ करें:

p {
margin: 25px 50px;
}

यदि marginसंपत्ति का एक मूल्य है:

मार्जिन: 25px;
- सभी चार मार्जिन 25px . हैं

उदाहरण

एक मान के साथ मार्जिन शॉर्टहैंड प्रॉपर्टी का उपयोग करें:

p {
margin: 25px;
}

ऑटो मूल्य

autoआप तत्व को उसके कंटेनर में क्षैतिज रूप से केंद्र में रखने के लिए मार्जिन गुण सेट कर सकते हैं ।

तत्व तब निर्दिष्ट चौड़ाई लेगा, और शेष स्थान बाएँ और दाएँ हाशिये के बीच समान रूप से विभाजित किया जाएगा।

उदाहरण

मार्जिन का प्रयोग करें: ऑटो:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

इनहेरिट वैल्यू

यह उदाहरण <p class="ex1"> तत्व के बाएँ हाशिया को मूल तत्व (<div>) से इनहेरिट करने देता है:

उदाहरण

विरासत मूल्य का उपयोग:

div {
border: 1px solid red;
margin-left: 100px;
}

p.ex1 {
margin-left: inherit;
}

❮ पहले का अगला ❯

सीएसएस ट्यूटोरियल

सीएसएस उन्नत

सीएसएस उत्तरदायी

सीएसएस ग्रिड

सीएसएस एसएएसएस

सीएसएस उदाहरण

सीएसएस संदर्भ

सीएसएस मार्जिन