बॉक्स मॉडल: CSS बाह्य किनारा

एलेमेंट के बाहरी किनारे के चारों ओर बाह्य किनारा है। बाह्य किनारा मार्गिन सेट करने से एलेमेंट के बाहर अतिरिक्त 'खाली स्थान' बनता है。

बाह्य किनारा मार्गिन सेट करने का सबसे सरल तरीका यह है margin गुणवत्ता, जो किसी भी लंबाई इकाई, प्रतिशत मान या नकारात्मक मान को स्वीकार करती है。

CSS margin गुण

बाह्य किनारा मार्गिन सेट करने का सबसे सरल तरीका यह है मार्गिन गुणवत्ता.

मार्गिन गुणवत्ता किसी भी लंबाई इकाई को स्वीकार करता है, जो पिक्सल, इंच, मिमी या em हो सकता है。

मार्गिन को auto रूप से सेट किया जा सकता है। सबसे आम प्रथा बाह्य किनारा मार्गिन को लंबाई मान के सेट करना है। नीचे का विन्यास h1 एलेमेंट के सभी ओर 1/4 इंच चौड़ा खाली स्थान को सेट करता है:

h1 {मार्गिन : 0.25इंच;}

इस उदाहरण में h1 एलेमेंट के चारों ओर के विभिन्न बाह्य किनारा मार्गिन को परिभाषित किया गया है, जिसमें इस्तेमाल किए गए लंबाई इकाई है पिक्सल (px):

h1 {मार्गिन : 10पिक्सल 0पिक्सल 15पिक्सल 5पिक्सल;}

与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left

另外，还可以为 margin 设置一个百分比数值：

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。

वैल्यू कॉपी

याद करें? हमने पहले दो अनुच्छेदों में वैल्यू कॉपी की चर्चा की थी।अब हम आपको वैल्यू कॉपी का उपयोग करने के तरीके से बताएंगे。

कभी-कभी, हम कुछ दोहरे कीवार्ड भरते हैं:

p {मार्ग: 0.5em 1em 0.5em 1em;}

कीवार्ड कॉपी करके, आपको इस जोड़े के नंबरों को दोहराना पड़ेगा।उपरोक्त नियम नीचे दिए गए नियम के समान है:

p {मार्ग: 0.5em 1em;}

ये दो कीवार्ड अगले 4 कीवार्ड के स्थान पर आ सकते हैं।ये कैसे करते हैं? CSS ने कुछ नियम निर्धारित किए हैं, जो बाह्य गले के लिए कम से कम 4 कीवार्ड निर्दिष्ट करने की अनुमति देते हैं।नियम निम्नलिखित हैं:

  • यदि बाएँ बाह्य गले का मान लापत है, तो दाएँ बाह्य गले का मान उपयोग किया जाता है。
  • यदि नीचे बाह्य गले का मान लापत है, तो ऊपर बाह्य गले का मान उपयोग किया जाता है。
  • यदि दाएँ बाह्य गले का मान लापत है, तो ऊपर बाह्य गले का मान उपयोग किया जाता है。

नीचे दिए गए चित्र इस बात को स्पष्ट करने के लिए एक अधिक स्पष्ट तरीका प्रदान करते हैं:

CSS वैल्यू कॉपी

अर्थात, यदि बाह्य गले के लिए 3 कीवार्ड निर्दिष्ट किए गए हैं, तो चौथा कीवार्ड (बाएँ बाह्य गला) दूसरे कीवार्ड (दाएँ बाह्य गला) से कॉपी करता है।यदि दो कीवार्ड दिए गए हैं, तो चौथा कीवार्ड दूसरे कीवार्ड से कॉपी करता है, तीसरा कीवार्ड (नीचे बाह्य गला) पहले कीवार्ड (ऊपर बाह्य गला) से कॉपी करता है।अंतिम स्थिति में, यदि केवल एक कीवार्ड दिया गया है, तो अन्य 3 बाह्य गले इस कीवार्ड (ऊपर बाह्य गला) से कॉपी करते हैं。

इस सरल मैकेनिज्म का उपयोग करके, आपको जरूरी मात्र कीवार्ड निर्दिष्ट करनी होगी, न कि सभी 4 कीवार्ड का उपयोग करना, उदाहरण के लिए:

h1 {मार्ग: 0.25em 1em 0.5em;}	/* समानता 0.25em 1em 0.5em 1em */
h2 {मार्ग: 0.5em 1em;}		/* समानता 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* समान 1px 1px 1px 1px */

इस तरीके का एक छोटा नाकामी है, आप अंततः इस समस्या का सामना करेंगे. यदि आप प एलिमेंट के ऊपरी और बाईं किनारे को 20 पिक्सल के रूप में सेट करना चाहते हैं, नीचे और दाईं किनारे को 30 पिक्सल के रूप में सेट करना चाहते हैं, इस स्थिति में, निम्नलिखित रूप में लिखना आवश्यक है:

p {margin: 20px 30px 30px 20px;}

इसी तरह, आप इस परिणाम को प्राप्त कर सकते हैं. दुख की बात यह है कि इस स्थिति में आवश्यक मानों की संख्या को कम करने का कोई तरीका नहीं है.

दूसरा उदाहरण देखें. यदि अनेक बाहरी किनारों को auto के अलावा केवल बाईं किनारे को 20px के रूप में सेट करना चाहते हैं:

p {margin: auto auto auto 20px;}

इसी तरह, आप इस प्रभाव को प्राप्त कर सकते हैं. समस्या इसी तरह है कि auto को टाइप करना कुछ ज़रूरी है. यदि आप केवल एलिमेंट के एककिनारे के बाहरी किनारे को नियंत्रित करना चाहते हैं, तो एककिनारा मार्जिन गुण का उपयोग करें.

एककिनारा मार्जिन गुण

आप किनारा के लिए एककिनारा मार्जिन गुण का उपयोग करके एलिमेंट के एककिनारे पर बाहरी किनारा की गुण को सेट कर सकते हैं. यदि आप प एलिमेंट के बाईं किनारे को 20px बनाना चाहते हैं, तो margin का उपयोग करने की जरूरत नहीं है (auto को टाइप करना जरूरी है), इसके बजाय निम्नलिखित तरीके का उपयोग कर सकते हैं:

p {margin-left: 20px;}

आप किसी भी इस गुण का उपयोग करके केवल उस किनारे के लिए बाहरी किनारा सेट कर सकते हैं, जिसे आप चाहते हैं, बिना किसी अन्य बाहरी किनारे को प्रभावित करने:

एक नियम में कई इस तरह के एककिनारा गुणों का उपयोग किया जा सकता है, उदाहरण के लिए:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

स्वाभाविक है, इस मामले में margin का उपयोग करना आसान है:

p {margin: 20px 30px 30px 20px;}

एककिनारा गुण या margin का उपयोग करने पर परिणाम एकसी है. आमतौर पर, अगर अनेक किनारों के लिए मार्जिन सेट करना चाहते हैं, तो margin का उपयोग करना आसान है. हालांकि, दस्तावेज़ प्रदर्शन के दृष्टिकोण से, वास्तव में किसी भी तरीके का उपयोग करना अहम नहीं है, इसलिए अपने लिए आसानतम तरीके को चुनना चाहिए.

सूचना और टिप्पणी

सूचना:नेटस्केप और IE द्वारा body टैग के लिए डिफ़ॉल्ट मार्जिन (मार्जिन) मान 8px है. लेकिन ओपेरा ऐसा नहीं है. इसके विपरीत, ओपेरा को आंतरिक फ़िल्ली (पैडिंग) के डिफ़ॉल्ट मान 8px बनाया गया है, इसलिए यदि पूरे वेबसाइट के किनारों को समायोजित करना चाहते हैं और इसे ओपेरा में सही तरीके से प्रदर्शित करना चाहते हैं, तो body के पैडिंग को कस्टम मार्जिन करना आवश्यक है.

CSS बाहरी किनारा उदाहरण:

पाठ का बाईं बाहरी किनारा सेट करें
本例演示如何设置文本的左外边距。
पाठ के नीचे बाह्यी छोर को सेट करें
पाठ के बाईं बाह्यी छोर को सेट करें
पाठ के दायां बाह्यी छोर को सेट करें
पाठ के ऊपरी बाह्यी छोर को सेट करें
पाठ के नीचे बाह्यी छोर को सेट करें
इस उदाहरण में देखा जाता है कि कैसे पाठ के नीचे बाह्यी छोर को सेट किया जाता है。
सभी बाह्यी छोर गुणों को एक ही व्याख्या में।
इस उदाहरण में देखा जाता है कि कैसे सभी बाह्यी छोर गुणों को एक ही व्याख्या में सेट किया जाता है。

CSS बाह्यी गुण

गुण वर्णन
margin लघु गुण।सभी बाह्यी छोर गुणों को एक ही व्याख्या में सेट करें。
margin-bottom एलिमेंट के नीचे बाह्यी छोर को सेट करें。
margin-left एलिमेंट के बाईं बाह्यी छोर को सेट करें。
margin-right एलिमेंट के दायां बाह्यी छोर को सेट करें。
margin-top एलिमेंट के ऊपरी बाह्यी छोर को सेट करें。