सीएसएस पैडिंग प्रॉपर्टी किसी तत्व के बॉर्डर से उसके अंदर पैडिंग सेट करने के लिए जिम्मेदार है

सीएसएस पैडिंग सिंटैक्स

पैडिंग: ऊपर दाएँ नीचे बाएँ;

• शीर्ष - तत्व की शीर्ष सीमा से इंडेंट;
• दाईं ओर - तत्व की दाईं सीमा से इंडेंट;
• निचला - तत्व की निचली सीमा से इंडेंट;
• बाएं - तत्व की बाईं सीमा से इंडेंट;

मान अक्सर पिक्सेल में निर्दिष्ट होते हैं। आप प्रतिशत और अन्य मान्य सीएसएस इकाइयाँ भी निर्दिष्ट कर सकते हैं।

नोट 1
आप चार से अधिक मान निर्दिष्ट कर सकते हैं. मानों की संख्या के आधार पर, क्रियाएँ भिन्न होंगी:

• यदि 3 मान निर्दिष्ट हैं, तो पहला मान शीर्ष पर इंडेंटेशन सेट करता है, दूसरा - बाएँ और दाएँ पर एक ही समय में, और तीसरा - नीचे
• यदि 2 मान निर्दिष्ट हैं, तो पहला मान ऊपर और नीचे पैडिंग सेट करता है, दूसरा - सामग्री के बाएँ और दाएँ पर
• यदि मान 1 पर सेट है, तो इंडेंटेशन सभी पक्षों के लिए समान इंडेंटेशन पर सेट है। उदाहरण के लिए:

पैडिंग: 10px 10px 10px 10px; आप इसे अधिक संक्षिप्त रूप से निर्दिष्ट कर सकते हैं:पैडिंग: 10px;

नोट 2
सीएसएस मार्जिन प्रॉपर्टी के विपरीत, नकारात्मक पैडिंग मान की अनुमति नहीं है।

पैडिंग में 4 अलग सीएसएस गुण भी हैं। उनमें से प्रत्येक किसी न किसी दिशा के लिए जिम्मेदार है।

• पैडिंग-लेफ्ट - तत्व की बाईं सीमा से पैडिंग;
• पैडिंग-राइट - तत्व की दाहिनी सीमा से पैडिंग;
• पैडिंग-टॉप - तत्व की शीर्ष सीमा से पैडिंग;
• पैडिंग-बॉटम - तत्व की बाईं सीमा से पैडिंग;

उदाहरण के लिए

पैडिंग: 3px 5px 7px 10px; या आप विस्तार से पूछ सकते हैं:पैडिंग-लेफ्ट: 10px; पैडिंग-राइट: 5px; पैडिंग-टॉप: 3px; पैडिंग-बॉटम: 7px;

किसी तत्व के अंदर विभिन्न इंडेंट वाले उदाहरण

उदाहरण 1: टैग के भीतर इंडेंट टेक्स्ट

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.

Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.

Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).

प्रयुक्त गुणों (पंक्तियों 6-9) के अलावा, मार्जिन-राइट, पैडिंग-राइट, मार्जिन-बॉटम, पैडिंग-बॉटम गुण भी हैं - वे क्रमशः दाएं और नीचे इंडेंटेशन के लिए हैं। इन सभी गुणों का मान पिक्सेल (पीएक्स), प्रतिशत (%), या ईएम इकाइयों में हो सकता है।

सिद्धांत रूप में, बस इतना ही। हालाँकि, उनके साथ काम करने की कुछ विशेषताएं अभी भी हैं।

मार्जिन और पैडिंग की विशेषताएं

पैडिंग का उपयोग करते समय, पैडिंग के आयामों को ब्लॉक की ऊंचाई और चौड़ाई से घटाया जाना चाहिए, अन्यथा ब्लॉक का आकार पैडिंग के आकार से बढ़ जाएगा।

यदि किसी ब्लॉक को ऑटो के मार्जिन-लेफ्ट और मार्जिन-राइट मान दिए गए हैं, तो यदि ब्लॉक की एक निश्चित चौड़ाई है (उदाहरण के लिए, 400px) और उसमें फ्लोट सीएसएस प्रॉपर्टी नहीं है, तो यह ब्लॉक केंद्र में संरेखित हो जाएगा वह तत्व जिसमें वह स्थित है। दरअसल, केंद्र संरेखण के साथ गैर-रबर लेआउट के लिए, इस संरेखण विधि का उपयोग आमतौर पर किया जाता है। इस तथ्य के बावजूद कि IE 5.5 और इससे पहले का संस्करण ऑटो वैल्यू का समर्थन नहीं करता है, यह अभी भी आपको इसे हर समय उपयोग करने से नहीं रोकता है =)।

तालिकाओं में पैडिंग और मार्जिन का उपयोग करना उचित नहीं है क्योंकि विभिन्न ब्राउज़रों में प्रभाव अप्रत्याशित होगा।

और आखिरी बात जो मैं कहना चाहता था. शॉर्टहैंड नोटेशन संरचनाओं का उपयोग करना न भूलें, जैसे कि मार्जिन: 10px 0 5px 20px;। यदि इंडेंटेशन शून्य है, तो आप पैरामीटर निर्दिष्ट किए बिना, बस शून्य डाल सकते हैं। यह याद रखना बहुत आसान है कि कौन सा पैरामीटर किस सीमा से संबंधित है - एक ब्लॉक के लिए, इंडेंट दक्षिणावर्त चलते हैं: पहला नंबर शीर्ष पर है, दूसरा दाईं ओर है, तीसरा नीचे है, चौथा नीचे है बाएं।

वास्तव में मैं आज आपको बस यही बताना चाहता था। सभी का साप्ताहिक अवकाश अच्छा हो!

नमस्कार, ब्लॉग साइट के प्रिय पाठकों। आज मैं अध्ययन के विषय को जारी रखना चाहता हूं और उन शैली नियमों पर विचार करना चाहता हूं जो आपको एचटीएमएल तत्वों के लिए इंडेंट और बॉर्डर सेट करने की अनुमति देते हैं: बॉर्डर, मार्जिन और पैडिंग।

इससे पहले, हम काफी सरल गुणों का अध्ययन करने में कामयाब रहे जो फ़ॉन्ट (), टेक्स्ट () को नियंत्रित करते थे और मॉडल को देखते थे

हां, हम उपयोग के सिद्धांतों पर विस्तार से (कई लेखों तक विस्तार करते हुए) विचार करने में भी कामयाब रहे। अब उन नियमों पर आगे बढ़ने का समय आ गया है जो दस्तावेज़ (वेब ​​पेज) के निर्माण का आधार बनते हैं, और हम ब्लॉक मॉडल (एचटीएमएल तत्वों का संबंध) से शुरू करेंगे।

में सामान्य रूपरेखामैं पहले ही आधुनिक लोगों के बारे में लिख चुका हूं, लेकिन आज हम शुद्ध विशिष्टताओं पर विचार करेंगे। यदि आप इस विषय पर पिछले प्रकाशन पढ़ना चाहेंगे, तो आपका स्वागत है।

सीएसएस में बॉक्स मॉडल - पैडिंग, मार्जिन और बॉर्डर

तीसरा, ब्याज का उपयोग किया जा सकता है। उनकी गिनती किससे की जाती है? यह पता चला है कि कंटेनर की चौड़ाई से(अर्थात, मूल तत्व के सामग्री क्षेत्र से)। इसके अलावा, यह न केवल मार्जिन-दाएं और बाएं पर लागू होता है, जो तर्कसंगत होगा, बल्कि मार्जिन-ऊपर और नीचे के लिए भी, प्रतिशत की गणना कंटेनर की चौड़ाई (और ऊंचाई नहीं) से सटीक रूप से की जाएगी।

आयामी मूल्यों को स्थापित करने के बारे में बोलते हुए, यह ध्यान दिया जाना चाहिए कि मार्जिन नकारात्मक भी हो सकता है. वे। बाहरी मार्जिन के लिए सकारात्मक मान निर्दिष्ट करते समय, हम आसन्न तत्व को निर्दिष्ट दूरी पर ले जाते हैं, और यदि हम नकारात्मक मान निर्दिष्ट करते हैं, तो पड़ोसी ब्लॉक बस उस ब्लॉक को ओवरलैप कर देगा जिसके लिए हम यह नकारात्मक इंडेंटेशन सेट करते हैं। और इसका प्रयोग CSS में बहुत बार किया जाता है.

खैर, यह कहने की आवश्यकता नहीं है कि एक पूर्वनिर्मित सीएसएस मार्जिन नियम है, जो कई मामलों में आपको आवश्यक बाहरी मार्जिन सेट करने के लिए उपयोग किए जाने वाले कोड के आकार को कम करने की अनुमति देता है। इसमें मूल्यों का क्रम सख्ती से विनियमित है (वे एक अंतरिक्ष चरित्र के माध्यम से लिखे गए हैं) और उदाहरण के अनुरूप होना चाहिए:

वे। गणना शीर्ष से शुरू होती है और जारी रहती है दक्षिणावर्तजब तक सर्कल सही इंडेंटेशन (दाएं) के साथ पूरा नहीं हो जाता। यह कुछ इस तरह दिख सकता है:

मार्जिन: 20px 10px 40px 30px;

और इसका मतलब यह होगा कि हमारे ब्लॉक के ऊपर ब्राउज़र को 20 पिक्सल, दाईं ओर - 10, नीचे - 40, और बाईं ओर - 30 इंडेंट करना चाहिए। यह प्रविष्टि इसके समतुल्य होगी:

सीएसएस कोड की कमी नग्न आंखों को दिखाई देती है। लेकिन यह सीमा नहीं है. पूर्वनिर्मित नियम में न केवल चार, बल्कि तीन, दो और यहां तक ​​कि सिर्फ एक मान का उपयोग करना काफी स्वीकार्य है। जो आगे कोड आकार को कम करने में मदद करेगा। हालाँकि, केवल कुछ मामलों में ही मूल्यों की संख्या कम करना संभव होगा:

1. यदि बाएँ और दाएँ मार्जिन समान हैं, उदाहरण के लिए, इस प्रकार: मार्जिन:20px 30px 40px 30px;

   वह अंतिम छोड़ा जा सकता है:

   मार्जिन: 20px 30px 40px;

   ये दो प्रीफ़ैब नियम प्रविष्टियाँ एक ही काम करती हैं। इसलिए, यदि आप मार्जिन में तीन मानों वाली कोई प्रविष्टि देखते हैं, तो चौथे (दाईं ओर) का मान दूसरे (बाईं ओर) में देखा जा सकता है।

   यदि ऊपर और नीचे के इंडेंटेशन बराबर हैं, तो ऐसी चाल अब काम नहीं करेगी, क्योंकि तार्किक रूप से केवल पूर्वनिर्मित नियम की प्रविष्टि की संरचना को कम करना संभव है इसके अंत से डुप्लिकेट मानों को काटना(और निचले इंडेंट का मान अंतिम से दूसरे स्थान पर होगा)।

2. यदि, बाएँ और दाएँ बाहरी मार्जिन की समानता के अलावा, ऊपर और नीचे उनके मानों की समानता है: मार्जिन:20px 30px 20px 30px;

   या, जो समान है (बिंदु 1 के कारण):

   मार्जिन: 20px 30px 20px;

   तब ऐसा पूर्वनिर्मित नियम केवल दो मानों के साथ लिखा जा सकता है, अंतिम को छोड़कर, जो पहले से मेल खाता है:

   मार्जिन: 20px 30px; इस मामले में, पहला मान बाहरी मार्जिन को लंबवत रूप से वर्णित करता है, और दूसरा - क्षैतिज रूप से।

3. और अंत में, यदि प्रीफ़ैब नियम में सभी मान समान हैं: मार्जिन:20px 20px 20px 20px;

   या, जो समान है (बिंदु 2 के कारण):

   मार्जिन: 20px 20px;

   उसका उपयोग किया जा सकता है अधिकतम संक्षिप्त रिकॉर्ड प्रकार(पहले से मेल खाने वाले अंतिम मान को हटाते हुए):

   मार्जिन:20px; जिसका अर्थ हमारे HTML तत्व के सभी तरफ समान मार्जिन होगा।

बाहरी मार्जिन के बारे में बोलते हुए, ऐसी योजना का उल्लेख करना उचित है "मार्जिन-कोलॉप्से"या, दूसरे शब्दों में, "मार्जिन पतन।" संक्षेप में इस घटना का सार इस प्रकार है।

यदि हमारे पास दो ब्लॉक एक-दूसरे के नीचे स्थित हैं (मार्जिन का पतन केवल लंबवत रूप से हो सकता है) और उन दोनों के लिए विपरीत बाहरी मार्जिन सेट किए गए हैं (उदाहरण के लिए, नीचे वाला शीर्ष तत्वऔर निचले मार्जिन के लिए ऊपरी मार्जिन), तो बड़ा मार्जिन मूल्य छोटे मार्जिन को अवशोषित कर लेगा।

उदाहरण के लिए, यदि शीर्ष ब्लॉक इस पर सेट है:

मार्जिन: 20px 20px 200px 20px;

और निचले वाले के लिए:

मार्जिन: 100px 20px 20px 20px;

फिर ऊपरी ब्लॉक का निचला मार्जिन (200px) निचले ब्लॉक के ऊपरी मार्जिन (100px, और भले ही यह 199px के बराबर हो जाए, कुछ भी नहीं बदलेगा) को अवशोषित कर लेगा और इन दोनों ब्लॉकों के बीच परिणामी बाहरी मार्जिन अभी भी बराबर होगा 200px. वे। केवल बड़े को ही ध्यान में रखा जाता हैमॉड्यूलो मार्जिन, और यह किसी भी तरह से लंबवत आसन्न तत्व के काउंटर मूल्य के साथ नहीं जुड़ता है।

यह एक ऐसा कैच है जो विशेष रूप से लंबवत और क्षैतिज रूप से काम करता है, विपरीत मार्जिन आयामों को बस एक दूसरे में जोड़ा जाएगा। लेकिन यह केवल एक ही चिह्न वाले मार्जिन पर लागू होता है, लेकिन यदि वे अलग-अलग चिह्नों के साथ हैं, तो उनकी संख्याएं आसानी से जुड़ जाएंगी और परिणामी मूल्य से ब्लॉक एक दूसरे से अलग हो जाएंगे।

उदाहरण के लिए, इस मामले में:

शीर्ष मार्जिन: 20px 20px -20px 20px; निचला मार्जिन: 10px 20px 20px 20px;

ब्लॉकों के बीच परिणामी मार्जिन -10px होगा, यानी। नीचे वाला 10px तक ओवरलैप हो जाएगा शीर्ष HTMLतत्व।

सीएसएस में मार्जिन नियम का उपयोग करने की एक अन्य विशेषता यह है कि निर्दिष्ट मान इनलाइन तत्वों के लिए लंबवत को अनदेखा किया जाता है. पूछकर:

मार्जिन:20px;

उदाहरण के लिए, के लिए, जो एक इनलाइन तत्व है, हम वास्तव में केवल क्षैतिज पैडिंग देखेंगे, और लंबवत रूप से कोई परिवर्तन नहीं होगा।

थोड़ा आगे देखते हुए, मैं कहूंगा कि इनलाइन टैग के लिए लंबवत पैडिंग काम करेगी, लेकिन बढ़ी हुई आंतरिक पैडिंग किसी भी तरह से अन्य पड़ोसी तत्वों के सापेक्ष इसकी समग्र स्थिति को प्रभावित नहीं करेगी।

ब्लॉक टैग (शीर्षक, पैराग्राफ) के मामले में, लंबवत पैडिंग बढ़ाने से यह तत्व अन्य आसन्न ब्लॉकों के सापेक्ष स्थानांतरित हो जाएगा।

खैर, फ़्रेम (बॉर्डर), या बल्कि इसकी चौड़ाई, अन्य आसन्न ब्लॉकों को लाइन टैग से लंबवत रूप से दूर ले जाने में सक्षम नहीं होगी। इनलाइन तत्वों के लिए, गति केवल एक दिशा में संभव है - क्षैतिज रूप से और बस इतना ही।

पैडिंग और बॉर्डर - आंतरिक पैडिंग और फ़्रेम

आइए अब पैडिंग नियम का उपयोग करके पैडिंग सेट करने के लिए आगे बढ़ें और देखें कि यह वास्तव में क्या मान ले सकता है:

जैसा कि आप देख सकते हैं, यहां ऑटो का कोई उल्लेख नहीं है, और यह सीएसएस नियम नकारात्मक मानों के उपयोग की अनुमति नहीं देता है (वे केवल सकारात्मक हो सकते हैं - शून्य और ऊपर से)। वे। पैडिंग का उपयोग करके सामग्री को फ़्रेम से आगे बढ़ाने का कोई तरीका नहीं है। अधिकतम जो किया जा सकता है वह सामग्री को फ्रेम के बहुत करीब लाना है।

इसमें प्रतिशत की गणना मार्जिन की तरह ही की जाती है - कंटेनर की चौड़ाई (मूल तत्व का सामग्री क्षेत्र) के सापेक्ष जिसमें हमारा तत्व संलग्न है। सीएसएस में समग्र पैडिंग नियमबनता है और उन्हीं कानूनों का पालन करता है जिनकी चर्चा ऊपर की गई है:

पैडिंग:20px 10px 40px 30px;

इस नियम में हम ऊपर से शुरू करके चारों भुजाओं का वर्णन करते हैं। यदि आपको इसमें कुछ कम करने की आवश्यकता है (तीन, दो या एक मान तक), तो आपको बाहरी इंडेंट के लिए ऊपर वर्णित कटौती सिद्धांतों का उपयोग करने की आवश्यकता होगी, जो आंतरिक इंडेंट के लिए बिल्कुल उसी सफलता के साथ काम करेगा।

और आज आखिरी बात जिस पर मैं विचार करना चाहूंगा वह वह ढांचा है जिसका उपयोग करके सेट किया गया है सीमा. उनके तीन प्रकार के पैरामीटर हैं:

1. सीमा-चौड़ाई - सीमा की मोटाई निर्धारित करती है
2. बॉर्डर-रंग - इसका रंग सेट करता है
3. बॉर्डर-शैली - फ़्रेम का प्रकार या रेखा का प्रकार जिसके साथ इसे खींचा जाएगा

इन तीनों सीएसएस नियमों में मानों का एक वैध सेट है:

फ़्रेम के लिए लाइन की चौड़ाई ( सीमा चौड़ाई) को या तो Em, Ex या Px में संख्याओं का उपयोग करके या शब्दों में निर्दिष्ट किया जा सकता है:

1. पतली - पतली रेखा;
2. मध्यम - औसत (यह मान डिफ़ॉल्ट रूप से उपयोग किया जाता है);
3. मोटा - मोटा.

फ़्रेम रंग के मान के रूप में ( सीमा रंग) आप उन्हें निर्दिष्ट करने के लिए स्वीकृत तरीकों का उपयोग कर सकते हैं (हेक्साडेसिमल कोड, शब्द, आदि):

सीमा-रंग:लाल;

डिफ़ॉल्ट रूप से, यदि बॉर्डर रंग स्पष्ट रूप से निर्दिष्ट नहीं है, तो तत्व के अंदर फ़ॉन्ट के लिए उपयोग किया जाने वाला रंग उपयोग किया जाएगा।
बॉर्डर-शैली सीएसएस संपत्ति आपको सीमा प्रकार को शब्दों में निर्दिष्ट करने की अनुमति देती है:

1. कोई नहीं - कोई फ़्रेम नहीं (डिफ़ॉल्ट)
2. बिंदीदार - रेखा बिंदुओं में खींची जाती है
3. धराशायी - बिंदीदार रेखा
4. ठोस - ठोस रेखा
5. डबल - डबल लाइन
6. नाली - दबा हुआ ढाँचा
7. चोटी - उभरी हुई
8. इनसेट और प्रारंभ - छाया खेल

स्वाभाविक रूप से, चूँकि किसी भी ब्लॉक की चार भुजाएँ होती हैं, इसलिए इसका उपयोग इस रूप में किया जा सकता है सामान्य नियम, और प्रत्येक पक्ष के लिए अलग:

पर भी यही लागू होगा पूर्वनिर्मित सीमा नियम— इसे सभी पक्षों के लिए एक साथ निर्दिष्ट किया जा सकता है (बॉर्डर), और प्रत्येक पक्ष के लिए अलग-अलग (बॉर्डर-ऊपर, बाएँ, नीचे और दाएँ)। मानों का क्रम महत्वपूर्ण नहीं है:

बॉर्डर:1px ठोस लाल;

यदि आप कुछ भूल गए हैं, तो इसके स्थान पर डिफ़ॉल्ट मान का उपयोग किया जाएगा।

आप सौभाग्यशाली हों! जल्द ही ब्लॉग साइट के पन्नों पर मिलते हैं

आपकी रुचि हो सकती है

ऊंचाई, चौड़ाई और अतिप्रवाह - ब्लॉक लेआउट में सामग्री क्षेत्र का वर्णन करने के लिए सीएसएस नियम
स्थिति (पूर्ण, सापेक्ष और निश्चित) - सीएसएस में एचटीएमएल तत्वों को स्थिति देने के तरीके (बाएं, दाएं, ऊपर और नीचे नियम) आंतरिक और के लिए अलग-अलग डिज़ाइन बाहरी संबंधसीएसएस के माध्यम से
सीएसएस में फ़्लोट और साफ़ करें - ब्लॉक लेआउट टूल
सीएसएस में डिस्प्ले (ब्लॉक, कोई नहीं, इनलाइन) - वेब पेज पर एचटीएमएल तत्वों का डिस्प्ले प्रकार सेट करें
सूची शैली (प्रकार, छवि, स्थिति) - सीएसएस नियमसूचियों के स्वरूप को अनुकूलित करने के लिए HTML कोड
सीएसएस में पृष्ठभूमि (रंग, स्थिति, छवि, दोहराव, अनुलग्नक) - एचटीएमएल तत्वों की पृष्ठभूमि रंग या पृष्ठभूमि छवि सेट करने के लिए सब कुछ
CSS क्या है, कैस्केडिंग स्टाइल शीट को इससे कैसे कनेक्ट करें HTML दस्तावेज़और इस भाषा का मूल वाक्यविन्यास nth-child छद्म-वर्ग का उपयोग करके साइट पर तालिकाओं, सूचियों और अन्य HTML तत्वों की पंक्तियों के वैकल्पिक पृष्ठभूमि रंग को कैसे कॉन्फ़िगर करें
सीएसएस में फ़ॉन्ट को स्टाइल करने के लिए फ़ॉन्ट (वजन, परिवार, आकार, शैली) और रेखा ऊंचाई नियम

तत्व की सामग्री के चारों ओर मार्जिन का मान निर्धारित करता है। मार्जिन तत्व के फ्रेम के अंदरूनी किनारे से उसकी सामग्री को बांधने वाले काल्पनिक आयत तक की दूरी है (चित्र 1)।

चावल। 1. पाठ के बाईं ओर हाशिया

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

संक्षिप्त जानकारी

वाक्य - विन्यास

गद्दी: [<размер> | <проценты>] {1, 4}

पिछले अध्याय में, हमने मार्जिन और पैडिंग जैसे सीएसएस गुणों का उल्लेख किया था। अब हम उन पर अधिक विस्तार से विचार करेंगे और विचार करेंगे कि वे एक-दूसरे से कैसे भिन्न हैं और उनमें क्या विशेषताएं हैं।

आप एक या दूसरे तरीके से तत्वों के बीच रिक्त स्थान बना सकते हैं, लेकिन यदि पैडिंग सामग्री से ब्लॉक के किनारे तक इंडेंटेशन है, तो मार्जिन एक ब्लॉक से दूसरे ब्लॉक, इंटरब्लॉक स्पेस की दूरी है। स्क्रीनशॉट एक स्पष्ट उदाहरण दिखाता है:

पैडिंग सामग्री को ब्लॉक बॉर्डर से अलग करती है, और मार्जिन ब्लॉक के बीच अंतराल बनाता है

जैसा कि आप देख सकते हैं, सीएसएस मार्जिन और पैडिंग एक दूसरे से भिन्न होते हैं, हालांकि कभी-कभी कोड को देखे बिना यह निर्धारित करना असंभव है कि दूरी निर्धारित करने के लिए किस संपत्ति का उपयोग किया जाता है। ऐसा तब होता है जब कंटेंट ब्लॉक का फ्रेम या बैकग्राउंड गायब होता है।

किसी तत्व के प्रत्येक तरफ सीएसएस में मार्जिन या पैडिंग सेट करने के लिए निम्नलिखित गुण मौजूद हैं:

गद्दी:

• पैडिंग शीर्ष: अर्थ;
• पैडिंग-दाएं: अर्थ;
• नीचे गद्दी करना: अर्थ;
• गद्दी छूट गई: अर्थ;

खेत:

• मार्जिन-टॉप: अर्थ;
• मार्जिन-दाएं: अर्थ;
• मार्जिन-बॉटम: अर्थ;
• मार्जिन-बाएँ: अर्थ;

मान किसी भी CSS इकाई में निर्दिष्ट किए जा सकते हैं - px, em, %, आदि। उदाहरण: मार्जिन-टॉप: 15px।

जैसी एक बहुत ही सुविधाजनक चीज़ भी है मार्जिन और पैडिंग सीएसएस के लिए शॉर्टहैंड. यदि आपको किसी तत्व के चारों तरफ मार्जिन या पैडिंग सेट करने की आवश्यकता है, तो आपको प्रत्येक पक्ष के लिए अलग-अलग संपत्ति लिखने की ज़रूरत नहीं है। सब कुछ सरल बना दिया गया है: मार्जिन और पैडिंग के लिए आप एक बार में 1, 2, 3 या 4 मान निर्दिष्ट कर सकते हैं। मानों की संख्या निर्धारित करती है कि सेटिंग्स कैसे वितरित की जाती हैं:

• 4 मान: निम्नलिखित अनुक्रम में तत्व के सभी पक्षों के लिए पैडिंग सेट की गई है: ऊपर, दाएं, नीचे, बाएं: पैडिंग: 2px 4px 5px 10px;
• 3 मान: पैडिंग पहले शीर्ष पक्ष के लिए सेट की जाती है, फिर बाएं और दाएं के लिए एक साथ, और फिर नीचे के लिए: पैडिंग: 3px 6px 9px;
• 2 मान: पैडिंग को पहले ऊपर और नीचे की ओर से एक साथ सेट किया जाता है, और फिर बाएँ और दाएँ के लिए एक साथ सेट किया जाता है: पैडिंग: 6px 12px;
• 1 मान: तत्व के सभी पक्षों के लिए समान पैडिंग सेट है: पैडिंग: 3px;

सीएसएस मार्जिन प्रॉपर्टी पर भी यही नियम लागू होते हैं। कृपया ध्यान दें कि आप मार्जिन के लिए नकारात्मक मानों का भी उपयोग कर सकते हैं (उदाहरण के लिए, -3px), जो कभी-कभी काफी उपयोगी हो सकता है।

मार्जिन संक्षिप्त करें

स्थिति की कल्पना करें: दो ब्लॉक तत्व एक दूसरे के ऊपर स्थित हैं और उन्हें मार्जिन फ़ील्ड दिए गए हैं। शीर्ष ब्लॉक मार्जिन: 60px पर सेट है, और निचला ब्लॉक मार्जिन: 30px पर सेट है। यह मान लेना तर्कसंगत होगा कि दो तत्वों के दो सीमावर्ती क्षेत्र बस स्पर्श करेंगे और परिणामस्वरूप, ब्लॉकों के बीच का अंतर 90 पिक्सेल के बराबर होगा।

हालाँकि, चीजें अलग हैं। वास्तव में, ऐसी स्थिति में, एक प्रभाव उत्पन्न होता है जिसे पतन कहा जाता है, जब तत्वों के दो आसन्न क्षेत्रों में से सबसे बड़े आकार का चयन किया जाता है। हमारे उदाहरण में, तत्वों के बीच अंतिम अंतर 60 पिक्सेल होगा।

कोलैप्सिंग मार्जिन केवल तत्वों के ऊपरी और निचले मार्जिन के लिए काम करता है और दाएं और बाएं तरफ के मार्जिन पर लागू नहीं होता है। अंतिम अंतर मान की गणना अलग-अलग स्थितियों में अलग-अलग तरीके से की जाती है:

• जब दोनों मार्जिन मान सकारात्मक होते हैं, तो परिणामी मार्जिन आकार बड़े मान के बराबर होगा।
• यदि मानों में से एक नकारात्मक है, तो फ़ील्ड के आकार की गणना करने के लिए आपको मानों का योग प्राप्त करने की आवश्यकता है। उदाहरण के लिए, 20px और -18px के मानों के साथ फ़ील्ड का आकार होगा:
  20 + (-18) = 20 - 18 = 2 पिक्सेल।
• यदि दोनों मान ऋणात्मक हैं, तो इन संख्याओं के मापांक की तुलना की जाती है और बड़े मापांक वाली संख्या (इसलिए, ऋणात्मक संख्याओं में से छोटी) का चयन किया जाता है। उदाहरण: आपको -6px और -8px फ़ील्ड के मानों की तुलना करने की आवश्यकता है। तुलना की जा रही संख्याओं का मापांक क्रमशः 6 और 8 है। यह इस प्रकार है कि 6-8. परिणामी फ़ील्ड का आकार -8 पिक्सेल है।
• ऐसे मामले में जहां मान निर्दिष्ट हैं विभिन्न इकाइयाँसीएसएस, उन्हें घटाकर एक कर दिया जाता है, जिसके बाद उनकी तुलना की जाती है और बड़े मूल्य का चयन किया जाता है।
• बाल तत्वों के लिए मार्जिन का आकार और भी दिलचस्प तरीके से निर्धारित किया जाता है: यदि किसी बच्चे के पास अपने माता-पिता की तुलना में बड़ा मार्जिन है, तो उसे प्राथमिकता दी जाती है। इस मामले में, माता-पिता के ऊपरी और निचले हाशिये का आकार वही होगा जो बच्चे के लिए निर्दिष्ट है। ऐसे में माता-पिता और बच्चे के बीच कोई दूरी नहीं रहेगी.

आज हम HTML पैडिंग के बीच अंतर को समझने पर काम करेंगे ( गद्दी) और CSS में मार्जिन (मार्जिन)। लेकिन पहले, आइए उनके वाक्य-विन्यास को समझें। इन गुणों को लिखने के कई तरीके हैं: नियमित और आशुलिपि:

सीएसएस में पैडिंग और मार्जिन

प्रश्न में गुणों के लिए नोटेशन का सामान्य रूप समझना आसान है क्योंकि यह अन्य सभी शैली नोटेशन के समान है:

नियमित प्रवेश:

पैडिंग-टॉप: 10px; पैडिंग-राइट: 20px; पैडिंग-बॉटम: 10px; पैडिंग-बाएं: 20px;

दूसरी ओर, सीएसएस शॉर्टहैंड इन सभी गुणों को एक सामान्य "पैडिंग" संपत्ति में जोड़ता है।

संक्षिप्त प्रविष्टि:

पैडिंग: 10px 20px 40px 10px;

पैडिंग और मार्जिन के चार मान हैं: ऊपर, दाएँ, नीचे और बाएँ। ऊपर दिखाया गया शॉर्टहैंड नोटेशन एक स्थान से अलग किए गए चार मान भी निर्दिष्ट करता है। चार मानों में से पहला शीर्ष पर पैडिंग है, फिर दाईं ओर पैडिंग, नीचे (नीचे HTML पैडिंग) और बाईं ओर पैडिंग है:

पैडिंग: ऊपर दाएँ नीचे बाएँ; (पैडिंग: ऊपर दाएँ नीचे बाएँ)

यदि बाएँ और दाएँ पैडिंग/मार्जिन समान हैं तो इस प्रविष्टि को तीन मानों तक कम किया जा सकता है। उदाहरण के लिए, यदि शीर्ष मार्जिन 30px है, बाएँ और दाएँ 10px हैं, और निचला मार्जिन 40px है, तो आप निम्नलिखित नोटेशन का उपयोग कर सकते हैं:

पैडिंग: 30px 10px 40px;

हम इसे दो मानों तक घटा देते हैं!

यदि ऊपर और नीचे का पैडिंग/मार्जिन समान है, और दाएं और बाएं पैडिंग/मार्जिन भी समान है, तो केवल दो मान निर्दिष्ट किए जा सकते हैं। इस उदाहरण में, हमारे पास ऊपर और नीचे की पैडिंग है जो 10px है, और बाएँ और दाएँ पैडिंग दोनों 20px हैं। हमारा सीएसएस इस तरह दिखेगा:

पैडिंग: ऊपर/नीचे दाएं/बाएं; (पैडिंग: ऊपर/नीचे दाएं/बाएं) पैडिंग: 10px 20px;

एक ही मतलब!

हमारा नवीनतम संस्करणपैडिंग और मार्जिन HTML के लिए शॉर्टहैंड में केवल एक मान होता है। इस नोटेशन का उपयोग तब किया जा सकता है जब सभी इंडेंट ( ऊपर, नीचे, दाएँ और बाएँ) का एक ही अर्थ है। यदि हम चाहते हैं कि सभी पक्षों में 20px पैडिंग हो, तो CSS इस तरह दिखेगा:

कब किस रिकॉर्डिंग फॉर्मेट का उपयोग करें? उदाहरण के लिए, यदि मैं किसी तत्व को केवल नीचे की पैडिंग देना चाहता हूं, तो मैं नियमित नोटेशन का उपयोग करूंगा क्योंकि मुझे संपत्ति को केवल एक तरफ लागू करने की आवश्यकता है: पैडिंग-बॉटम: 30px;

पैडिंग और मार्जिन के साथ कैसे काम करें

इन दोनों गुणों के बीच एक उल्लेखनीय अंतर है। पैडिंग का उपयोग HTML तत्व के कंटेनर के भीतर स्थान को परिभाषित करने के लिए किया जाता है। मार्जिन का उपयोग तत्वों की बाहरी सीमा के आसपास के स्थान को परिभाषित करने के लिए किया जाता है।

कल्पना करें कि आप पर सर्दियों का कोट डाला जा रहा है। कोट आपका हिस्सा है, लेकिन अगर मैंने आप पर पेंट फेंका, तो यह उस कोट की तुलना में अधिक बड़े क्षेत्र को कवर कर लेगा, जब आपने वह कोट नहीं पहना होता।

आप पैडिंग को कार्डबोर्ड बॉक्स में पैडिंग के रूप में भी सोच सकते हैं। जब आप किसी बॉक्स को फोम से भरते हैं, तो आप इसका उपयोग सामग्री को बॉक्स के किनारों से दूर रखने के लिए करते हैं। CSS में पैडिंग भी यही काम करती है।

अब मार्जिन को अपने चारों ओर एक अदृश्य शक्ति क्षेत्र के रूप में सोचें। बल क्षेत्र अन्य चीज़ों को आपसे दूर रखता है। कोट और पेंट के उदाहरण पर वापस जाएं, अगर मैं आप पर पेंट फेंकूं और यह बल क्षेत्र से गुजरने में सक्षम हो, तो यह अभी भी आपको और आपके कोट को ही कवर करेगा।

किसी साइट के उदाहरण पर पैडिंग और मार्जिन

आइए तत्वों के साथ उदाहरणों का उपयोग करके गुणों को देखें। हम एक पैराग्राफ (टैग) से शुरुआत करेंगे

), फिर इसमें एक पृष्ठभूमि रंग जोड़ें और प्रत्येक तरफ 30px पैडिंग जोड़ें।

नीचे बाईं ओर आप देख सकते हैं कि यह एक पैराग्राफ है जिसके चारों ओर 30px पैडिंग है। दाईं ओर की छवि में मैंने टूल का उपयोग किया है गूगल क्रोमयह दिखाने के लिए कि इस तत्व के लिए HTML पैडिंग कहां से शुरू/समाप्ति होती है। हरा रंगनीचे दी गई छवि में वह पैडिंग है जो कंटेनर के चारों ओर रखी गई है। गहरा नीला पृष्ठभूमि रंग आंतरिक क्षेत्र को भर देता है:

अब पैराग्राफ में एक मार्जिन जोड़ते हैं। मैं ऊपर और नीचे 30px पैडिंग, साथ ही बाएँ और दाएँ 20px जोड़ूँगा। बाईं ओर नीचे दी गई छवि दिखाती है कि यह पैराग्राफ मार्जिन से कैसे बदल गया है। छवि की वास्तविक चौड़ाई छोटी है क्योंकि मार्जिन अन्य HTML तत्व को सीमा से दूर धकेलता है। दाईं ओर आप देख सकते हैं कि नारंगी रंग तत्व के चारों ओर का मार्जिन है। मार्जिन हमेशा पैडिंग के बाहर होता है और गहरे नीले रंग की पृष्ठभूमि मार्जिन क्षेत्र तक विस्तारित नहीं होती है:

यदि आप अभी भी इस बात को लेकर असमंजस में हैं कि पैडिंग और मार्जिन HTML का उपयोग कैसे करें, तो यह प्रयोग करने का समय है! जितना अधिक आप सीएसएस गुणों का उपयोग करेंगे और उनके मूल्यों को बदलेंगे, उतना ही बेहतर आप समझ पाएंगे कि वे कैसे काम करते हैं।

लेख का अनुवाद " सीएसएस पैडिंग बनाम. मार्जिन और उनका उपयोग कैसे करेंमित्रवत परियोजना टीम द्वारा तैयार किया गया था।

अच्छा बुरा

• ट्यूटोरियल

इस लेख का उद्देश्य साधारण चीजों को जटिल बनाना नहीं है, बल्कि उन प्रसिद्ध मानकों पर ध्यान केंद्रित करना है जिन्हें किसी तरह भुला दिया गया है। आपके लेआउट के सभी पहलुओं में एक सार्थक संरचना बनाए रखना महत्वपूर्ण है, और आपके इंडेंटेशन में इसका पालन करना भी उतना ही महत्वपूर्ण है। और लेआउट के मुख्य सिद्धांतों में से एक लचीलापन है। अर्थात्, बिना कुछ तोड़े आसानी से कोई भी बदलाव करने की क्षमता। मार्जिन और पैडिंग का उचित प्रबंधन इस मामले में बहुत महत्वपूर्ण भूमिका निभाता है।

पृष्ठ पर स्थिति तत्वों के वातावरण में निम्नलिखित सिद्धांत लागू किए जाते हैं। इनका उपयोग सजावटी तत्वों में भी किया जाता है। लेकिन इतना स्पष्ट नहीं.

मूलरूप आदर्श:

1. इंडेंटेशन आखिरी को दिया जाता है संभव तत्वघर में।
2. स्वतंत्र तत्वों (बीईएम ब्लॉक) के लिए इंडेंट सेट नहीं किए जा सकते।
3. समूह के अंतिम तत्व के लिए, इंडेंट को शून्य (हमेशा) पर रीसेट कर दिया जाता है।

इंडेंट पिछले तत्व से अगले तत्व तक जाते हैं।

इसका मतलब यह है कि गुण जैसे मार्जिन-लेफ्ट और मार्जिन-टॉप का उपयोग नहीं किया जाता है(अपवादों के बिना नहीं)। पैडिंग के साथ, सब कुछ थोड़ा विपरीत है (सिवाय इसके कि इसका उपयोग सजावटी उद्देश्यों, लिंक क्षेत्र को बढ़ाने आदि के लिए किया जाता है)। जब किसी ब्लॉक को शीर्ष या बाईं ओर पैडिंग की आवश्यकता होती है, तो वह इसे पैरेंट के पैडिंग-टॉप और पैडिंग-लेफ्ट से प्राप्त करता है।

इंडेंटेशन ट्री हाउस के प्रवाह की दिशा में जाते हैं, ब्लॉक स्वयं को धक्का नहीं देता है।
प्रारंभ में, वह एक स्थिर स्थिति में होता है, और दूसरों की कीमत पर किसी प्रकार का प्रभाव प्राप्त करता है।

इंडेंटेशन घर में अंतिम संभावित तत्व को दिया जाता है

उदाहरण में निम्नलिखित संरचना में 3 सूचियाँ हैं:

• दूर, बहुत दूर, मौखिक से परे।

इंडेंटेशन बाल तत्वों की कीमत पर नहीं, बल्कि पड़ोसी तत्वों की कीमत पर किया जाता है।

इस स्थिति में, .main-section__item अंतिम संभावित विकल्प है जिसे सूचियों को अलग करने के लिए इंडेंट किया जा सकता है। एक div, एक सूची, एक पंक्ति या एक लिंक को इंडेंट करके समान प्रभाव प्राप्त किया जा सकता है, लेकिन यह सही नहीं होगा।

यह उदाहरण काफी सरल है. लेकिन अगर आप बहुत बड़े घोंसले की कल्पना करते हैं, जहां किसी ने इंडेंटेशन फैला दिया है, तो कुछ किनारे ढह जाते हैं। और कुछ को पैडिंग में जोड़ा जाता है।

सात शब्दों के अनुभाग में शीर्षक

साथ रहने का सबसे सरल कारण यह सिद्धांत, इसका उद्देश्य भविष्य में इंडेंटेशन ढूंढना आसान बनाना है, या तो आपके लिए या किसी ऐसे व्यक्ति के लिए जो भविष्य में आपके लेआउट के साथ काम करेगा। यह सुविधा के बारे में है.

वास्तविक समस्याएँ तब उत्पन्न हो सकती हैं जब खराब इंडेंटेशन संरचना वाले लेआउट को गतिशील रूप से या डुप्लिकेट किया जाता है।

स्वतंत्र तत्वों (बीईएम ब्लॉक) के लिए इंडेंट सेट नहीं किए जा सकते

यदि आपको किसी ब्लॉक को इंडेंट करने की आवश्यकता है. बिना किसी पूर्वाग्रह के, इसका उपयोग करके ऐसा किया जाता है:

• तत्व के माध्यम से विरासत (यदि आप इस ब्लॉक को तत्व से खींचते हैं, तो कोई इंडेंटेशन नहीं होगा, और आप इसे आसानी से किसी अन्य स्थान पर रख सकते हैं)।
• एक वर्ग जोड़ना (आप किसी ब्लॉक को एक तत्व बना सकते हैं)।
• रैपर (एक ब्लॉक की तरह जिसकी भूमिका होती है, केवल स्थिति में)।

समूह के अंतिम तत्व का इंडेंटेशन शून्य पर रीसेट हो गया है (हमेशा)

अंतिम ली के लिए, इंडेंटेशन शून्य पर रीसेट हो जाता है। और इंडेंटेशन बनाया गया है आसन्न तत्वों के बीचउल और आईएमजी. दूसरे सिद्धांत में क्या चर्चा की गई.

चलिए एक और उदाहरण लेते हैं:

...

हम समाचारों के बीच के मार्जिन में रुचि रखते हैं जो set.blog-preview__item (मार्जिन-बॉटम: 20px;) है। अंतिम मार्जिन को शून्य पर रीसेट कर दिया गया है, और निचला इंडेंटेशन ब्लॉग-पूर्वावलोकन को पैडिंग करके बनाया गया है। दूसरे सिद्धांत में क्या चर्चा की गई.

अन्य छद्म-वर्गों की तुलना में अधिक बार, आपको:अंतिम-बच्चे का उपयोग करना चाहिए।

आइटम:नहीं(:अंतिम-चाइल्ड) (मार्जिन-बॉटम: 20px; ) // या // .आइटम (//अन्य शैलियाँ // मार्जिन-बॉटम: 20px; &:लास्ट-चाइल्ड (मार्जिन-बॉटम: 0;) ) // या मार्जिन-टॉप, यहां मुख्य विचार मार्जिन की दिशा में नहीं है, बल्कि अतिरिक्त // .आइटम + .आइटम (मार्जिन-टॉप: 20px;) // या // .आइटम ( /) की अनुपस्थिति में है / अन्य शैलियाँ // & + & (मार्जिन-टॉप: 20px; ) )

अपवाद

बेशक, ऐसे विशेष मामले, गैर-तुच्छ कार्य और बारीकियां हैं जिनमें इन सिद्धांतों का पालन करना असंभव है, लेकिन अन्यथा लेआउट को यथासंभव स्वच्छ बनाने के लिए आदर्श इंडेंटेशन के लिए प्रयास करना उचित है।

पी.एस.मैं आपको प्रकाशन पढ़ने की सलाह देता हूं

स्रोत: मार्जिन या पैडिंग?
फिलिप स्पोररर.
अनुवाद: वीएल49.

फ़ॉर्मेटिंग उद्देश्यों के लिए मार्जिन का उपयोग करना कब बेहतर है और पैडिंग का उपयोग कब करना बेहतर है, और क्या इससे कोई फर्क पड़ता है?

मैं उपयुक्त उत्तरों की तलाश में बहुत लंबे समय तक संघर्ष करता रहा। विभिन्न दुष्प्रभावों के साथ बहुत सारे भयानक, समझ से बाहर होने वाले सीएसएस कोड लिखने के बाद ही मैं विश्वास के साथ कह सका कि मुझे ऊपर सूचीबद्ध मुद्दों के संबंध में बुनियादी नियम मिल गए हैं।

स्पष्टता के लिए, आइए एक विशिष्ट स्थिति पर नजर डालें जो 2017 में प्रत्येक उपयोगकर्ता इंटरफ़ेस डेवलपर से परिचित होने की संभावना है। हमारे पास एक साधारण कार्ड टेम्पलेट है.

इस उदाहरण में, दो प्रकार के अंतरालों को प्रतिष्ठित किया जा सकता है:

यहां यह समझना बहुत महत्वपूर्ण है कि हम दो अलग-अलग अवधारणाओं से निपट रहे हैं जिन्हें इकट्ठे होने पर परस्पर संबंधित नहीं होना चाहिए। यानी, अगर मुझे कार्ड और उनके कंटेनर के बीच की दूरी को बदलने की ज़रूरत है, उदाहरण के लिए, 24 पिक्सेल तक, तो इससे किसी भी तरह से कार्ड के बीच की दूरी प्रभावित नहीं होनी चाहिए।

सीएसएस का उपयोग करके उदाहरण लागू करना?

मार्जिन और पैडिंग का उपयोग करके इस तरह का टेम्पलेट बनाने के वस्तुतः हजारों तरीके हैं, लेकिन मैं एक ऐसा टेम्पलेट प्रस्तुत करना चाहूंगा जो मार्जिन और पैडिंग गुणों के सही उपयोग को प्रदर्शित करता है। इसके अलावा, यह विधि आपको भविष्य में अन्य कार्ड जोड़ने की अनुमति देती है।

कंटेनर (
पैडिंग: 16px;
}
.कार्ड + .कार्ड (
मार्जिन: 0 0 0 8px;
}

सिर्फ 2 चयनकर्ता और 2 नियम।

धन चिह्न क्या कार्य करता है?

प्रतीक + दर्शाता है आसन्न चयनकर्ता. यह केवल उस तत्व को इंगित करता है जो इस चयनकर्ता से पहले निर्दिष्ट तत्व का तुरंत अनुसरण करता है।

जैसा कि ऊपर की छवि से देखा जा सकता है, हमारे मामले में, यह चयनकर्ता चयन करेगा प्रत्येक कार्ड जिसके पहले कोई अन्य कार्ड आता है. इसलिए, आसन्न चयनकर्ता का उपयोग करके, हम पहले कार्ड को छोड़कर प्रत्येक कार्ड के लिए बायां मार्जिन सेट कर सकते हैं।

इसका मतलब यह है कि हमारे पास किसी भी आवश्यक संख्या में कार्ड जोड़ने की क्षमता है, जिनके बीच की दूरी हमेशा आठ पिक्सेल होगी।

जब तक हमें कार्ड के बगल में कार्ड के अलावा कुछ और रखने की आवश्यकता नहीं होती तब तक सब कुछ ठीक चलता है। अच्छा, मान लीजिए एक बटन "कार्ड जोड़ें" ("कार्ड जोड़ें"):

मौजूदा सीएसएस कोड स्निपेट को देखते हुए, हम संभवतः बटन का प्रतिनिधित्व करने वाले नए तत्व को class.card निर्दिष्ट नहीं करेंगे, क्योंकि यह एक कार्ड नहीं है। हो कैसे? क्या इसके लिए एक अतिरिक्त क्लास name.add-card बनाना उचित है, जिसमें मार्जिन प्रॉपर्टी के साथ क्लास.कार्ड के समान नियम शामिल हैं? नहीं, एक बेहतर उपाय है.

लोबोटोमाइज्ड उल्लू *+*।

यह किस तरह का दिखता है? अजीब जुड़ाव के बावजूद, यह विधि बहुत बढ़िया काम करती है और जब से मुझे इसके अस्तित्व के बारे में पता चला है तब से मैं इसका लगातार उपयोग कर रहा हूं। तो यह सब क्या है? यहां संबंधित सीएसएस कोड पर एक नजर डालें:

कंटेनर (
पैडिंग: 16px;
}
/* अच्छा, क्या आपने लोबोटोमाइज्ड उल्लू को पहचाना? 😜 */
.कंटेनर > * + * (
मार्जिन: 0 0 0 8px;
}

जैसा कि आपको याद होगा, पिछला चयनकर्ता किसी भी ऐसे कार्ड पर लागू होता था जिसके पहले कोई अन्य कार्ड था। अब इसकी मदद से हम फॉर्मेट कर सकते हैं प्रत्येक तत्व जिसके ठीक पहले कोई अन्य तत्व है, बेशक बटन सहित।

अंततः।

मुझे पूरी उम्मीद है कि यहां प्रस्तुत सामग्री से आपको यह समझने में मदद मिली होगी कि कंटेनर के भीतर सामग्री को अलग करने के लिए पैडिंग का उपयोग कब करना है और मार्जिन का उपयोग कब करना है।

परिणामस्वरूप, मैं आपके विचार के लिए उपरोक्त उदाहरणों के साथ-साथ मेरे अपने अनुभव से परीक्षण किए गए दो नियमों को प्रदर्शित करने वाला एक पेन-प्रोजेक्ट प्रस्तुत करना चाहूंगा। तो, आइए उपयोग करें:

गद्दी- कंटेनर और उसकी सामग्री के बीच रिक्त स्थान के लिए।

अंतर- कंटेनर के अंदर तत्वों के बीच रिक्त स्थान के लिए।

19 उत्तर

टीएल; डॉ:डिफ़ॉल्ट रूप से मैं हर जगह एक मार्जिन का उपयोग करता हूं, सिवाय इसके कि जब मेरे पास कोई बॉर्डर या पृष्ठभूमि हो और मैं उस दृश्यमान मार्जिन के अंदर जगह बढ़ाना चाहता हूं।

मेरे लिए, पैडिंग और मार्जिन के बीच सबसे बड़ा अंतर यह है कि वर्टिकल मार्जिन स्वचालित रूप से सिकुड़ जाता है जबकि पैडिंग नहीं होता है।

दो तत्वों पर विचार करें, एक दूसरे के ऊपर, प्रत्येक 1em इंडेंटेशन के साथ। इस इंडेंटेशन को तत्व का हिस्सा माना जाता है और इसे हमेशा संरक्षित रखा जाता है।

तो आपको पहले तत्व की सामग्री मिलेगी, उसके बाद पहले तत्व की पैडिंग, फिर दूसरे की पैडिंग और फिर दूसरे तत्व की सामग्री मिलेगी।

तो इन दोनों तत्वों की सामग्री अंततः 2em गुणा 2 तत्वों की हो जाएगी।

अब इस पैडिंग को 1em मार्जिन से बदलें। मार्जिन को तत्व की सीमाओं के बाहर माना जाता है, और आसन्न तत्वों के मार्जिन ओवरलैप होंगे।

तो इस उदाहरण में आपको पहले तत्व की सामग्री मिलेगी, उसके बाद कॉम्बो बॉक्स का 1em, और फिर दूसरे तत्व की सामग्री मिलेगी। इस प्रकार, इन दोनों तत्वों की सामग्री 1 1em अलग है।

यह बहुत उपयोगी हो सकता है जब आप जानते हैं कि आप तत्वों के बीच 1em स्थान बताना चाहते हैं, चाहे वह किसी भी तत्व के बगल में हो।

दो अन्य बड़े अंतर यह हैं कि पैडिंग क्लिक क्षेत्र और पृष्ठभूमि/छवि रंग में शामिल है, लेकिन बॉक्स में नहीं।

उदाहरणों, रेखाचित्रों और यहां तक ​​कि "इसे स्वयं आज़माएं" के साथ इसे समझाते हुए मैंने जो सबसे अच्छा देखा है वह यही है।

नीचे दिया गया चार्ट तात्कालिक जानकारी देता है दृश्य प्रतिनिधित्वअंतर के बारे में.

एक बात का ध्यान रखना चाहिए कि मानक-अनुपालक ब्राउज़र (IE क्विर्क अपवाद हैं) केवल एक निश्चित चौड़ाई पर सामग्री का एक हिस्सा प्रदर्शित करते हैं, इसलिए अपने लेआउट गणना में इसका ध्यान रखें। यह भी ध्यान दें कि विंडो फ्रेम में बूटस्ट्रैप 3 सपोर्ट दिखाई दे रहा है।

अंतरबनाम गद्दी:

मार्जिन का उपयोग किसी तत्व में उस तत्व और पृष्ठ पर अन्य तत्वों के बीच दूरी बनाने के लिए किया जाता है। जब पैडिंग का उपयोग सामग्री और किसी तत्व की सीमा के बीच दूरी बनाने के लिए किया जाता है।

मार्जिन तत्व का हिस्सा नहीं है, जहां पैडिंग तत्व का हिस्सा है।

आपके प्रश्न के लिए अधिक तकनीकी स्पष्टीकरण है, लेकिन यदि आप मार्जिन और पैडिंग के बारे में सोचने का कोई तरीका ढूंढ रहे हैं जो आपको यह चुनने में मदद करेगा कि उनका उपयोग कब और कैसे करना है, तो इससे मदद मिल सकती है।

ब्लॉक के तत्वों की तुलना दीवार पर लटके चित्रों से करें:

• खिड़की ब्राउज़रएक दीवार की तरह दिखता है.
• सामग्रीएक तस्वीर की तरह दिखता है.
• अंतरफ़्रेमयुक्त चित्रों के बीच की जगह के समान।
• जोड़नाफोटो के चारों ओर मैटिंग जैसा लग रहा है।
• बॉर्डर फ़्रेम बॉर्डर के समान है.

मार्जिन और इंडेंटेशन पर निर्णय लेते समय अंगूठे का एक अच्छा नियम है अंतरजब आप किसी वस्तु को दीवार पर अन्य चीज़ों के संबंध में रखते हैं और जोड़ना. > जब आप सेट अप करते हैं उपस्थितितत्व स्वयं. मार्जिन तत्व के आकार को नहीं बदलेगा, लेकिन पैडिंग आमतौर पर तत्व को 1 से बड़ा बना देगी।

1 इस डिफ़ॉल्ट विंडो मॉडल को बॉक्स-साइज़िंग विशेषता का उपयोग करके बदला जा सकता है।

जहां तक ​​मार्जिन का सवाल है, आपको तत्व की चौड़ाई के बारे में चिंता करने की ज़रूरत नहीं है।

जब भी आप कुछ देते हैं (पैडिंग: 10px;) तो आपको तत्व की चौड़ाई कम करने की आवश्यकता होती है 20px, बचाने के लिए " उपयुक्त"और इसके आस-पास के अन्य तत्वों को परेशान न करें।

इसलिए मैं आमतौर पर सब कुछ "पैक" करने के लिए पैडिंग का उपयोग करके शुरुआत करता हूं और फिर छोटे समायोजन करने के लिए मार्जिन का उपयोग करता हूं।

ध्यान रखने योग्य एक और बात यह है कि पैडिंग अधिक संगत हैं विभिन्न ब्राउज़र, और IE नकारात्मक मार्जिन को बहुत अच्छी तरह से संभाल नहीं पाता है।

यहां कुछ HTML हैं जो दर्शाते हैं कि पैडिंग और मार्जिन क्लिक-थ्रू दरों और पृष्ठभूमि भरण को कैसे प्रभावित करते हैं। ऑब्जेक्ट अपनी पैडिंग पर क्लिक प्राप्त करता है, लेकिन अपने मूल ऑब्जेक्ट पर जाने के लिए ऑब्जेक्ट के मार्जिन क्षेत्र पर क्लिक करता है।

$('बाहरी').क्लिक करें(फ़ंक्शन(ई) (कंसोल.लॉग('बाहरी'); ई.स्टॉपप्रॉपैगेशन(); )); $("।inner").click(function(e) ( console.log("inner"); e.stopPropagation(); )); .बाहरी (पैडिंग: 10px; पृष्ठभूमि: लाल; ) .आंतरिक (मार्जिन: 10px; पैडिंग: 10px; पृष्ठभूमि: नीला; बॉर्डर: ठोस सफेद 1px; )

मार्जिन तत्व के आसपास के क्षेत्र (सीमा के बाहर) को साफ़ करता है, लेकिन पैडिंग तत्व की सामग्री (सीमा के अंदर) के आसपास के क्षेत्र को साफ़ करता है।

इसका मतलब यह है कि आपका तत्व अपनी बाहरी सीमाओं के बारे में नहीं जानता है, इसलिए यदि आप गतिशील वेब नियंत्रण डिज़ाइन कर रहे हैं, तो यदि आप कर सकते हैं तो मैं पैडिंग और मार्जिनिंग का उपयोग करने की सलाह देता हूं।

कृपया ध्यान दें कि कई बार आपको मार्जिन का उपयोग करने की आवश्यकता होती है।

सीएसएस में, आपके तत्वों के चारों ओर जगह बनाने के दो तरीके हैं: मार्जिन और पैडिंग। अधिकांश उपयोग के मामलों में वे कार्यात्मक रूप से समान हैं, लेकिन वास्तव में वे कुछ अलग तरीके से व्यवहार करते हैं। मार्जिन और पैडिंग के बीच महत्वपूर्ण अंतर हैं जिन पर आपको यह चुनते समय विचार करना चाहिए कि पृष्ठ के चारों ओर तत्वों को स्थानांतरित करने के लिए क्या उपयोग करना है। हालाँकि, ऐसे मामलों में जहां किसी मार्जिन या पैडिंग का उपयोग समान प्रभाव के लिए किया जा सकता है, कई निर्णय व्यक्तिगत प्राथमिकता पर आते हैं।

फ़ील्ड का उपयोग कब करें

आप चाहते हैं कि आपकी रिक्ति बनाए गए बॉक्स के बाहर दिखाई दे सीमा संपत्ति. मार्जिन सीमाओं के बाहर होते हैं, इसलिए यदि आप चाहते हैं कि आपकी सीमा एक ही स्थान पर रहे तो आप उनका उपयोग करें। यह उपयोगी हो सकता है यदि आपके पास, उदाहरण के लिए, बॉर्डर वाला एक साइडबार है जिसे आप मुख्य सामग्री क्षेत्र से दूर ले जाना चाहते हैं।

आप नहीं चाहते कि पृष्ठभूमि का रंग या छवि आपके व्यक्तिगत स्थान पर आक्रमण करे। पृष्ठभूमि रंगऔर छवियां सीमा पर रुकती हैं, इसलिए यदि आप अपनी पृष्ठभूमि को उस स्थान से बाहर रखना चाहते हैं जिसे आप बना रहे हैं, तो मार्जिन वह संपत्ति है जो आप चाहते हैं।

आप अपने तत्व के ऊपर और नीचे का स्थान रीसेट करना चाहते हैं। शीर्ष और नीचे के मार्जिन साइड मार्जिन की तुलना में अलग-अलग व्यवहार करते हैं; यदि दो फ़ील्ड एक-दूसरे के ऊपर रखे जाते हैं, तो वे फ़ील्ड के सबसे बड़े सेट के आकार में ढह जाते हैं। उदाहरण के लिए, यदि मैं 20px शीर्ष मार्जिन और 15px निचले मार्जिन के साथ एक पैराग्राफ सेट करता हूं, तो मेरे पास पैराग्राफ के बीच केवल 20px जगह होगी (दोनों मार्जिन एक दूसरे के ऊपर अलग हो जाते हैं, और सबसे बड़ी जीत होती है)।

गैसकेट का उपयोग कब करें