लेख आयटी नोट्स एचटीएमएल आणि सीएसएस चला कायम लक्षात ठेवा: मार्जिन आणि पॅडिंगमध्ये काय फरक आहे
मंचांवर फिरत असताना मला हे वास्तव समोर आले की काय, असा प्रश्न अजूनही पडतो पॅडिंग, आणि काय समास, आणि त्यांच्यात काय फरक आहेत. म्हणूनच मी तुम्हाला याची आठवण करून देण्याचा निर्णय घेतला. तर, अमूर्त वाक्यांचा अवलंब न करता, चला समस्या मांडू आणि एक उदाहरण पाहू ज्यामध्ये सर्व काही स्पष्ट होईल.
कार्य: पानावर मला लाल ब्लॉक हवा आहे(200x200 पिक्सेल), जे ब्राउझरच्या काठावरुन मागे पडतोवर आणि डावीकडे अनुक्रमे 40 आणि 70 पिक्सेल, आणि त्यातील मजकूर डावीकडे आणि वर इंडेंट केलेला आहे 40 पिक्सेलने.
उपाय: चित्र आणि कोड पहा. आमचा लाल ब्लॉक 200 बाय 200 पिक्सेल पेक्षा जास्त नसावा आणि तो ब्राउझरच्या (किंवा इतर सामग्री ब्लॉक्स्) मधून इंडेंट केलेला असावा. वास्तविक, आम्ही मार्जिनद्वारे हे इंडेंट बनवतो. जर आपण पॅडिंग केले, तर इंडेंटेशन आपल्या लाल ब्लॉकमध्ये होते आणि इंडेंटेशन ब्लॉकच्या पार्श्वभूमीसह प्राप्त होते (म्हणजे लाल).

200?"200px":""+(this.scrollHeight+5)+"px");">

वापरलेल्या गुणधर्मांव्यतिरिक्त (ओळी 6-9), समास-उजवे, पॅडिंग-उजवे, समास-तळा, पॅडिंग-तळ हे गुणधर्म देखील आहेत - ते अनुक्रमे उजवीकडे आणि तळाशी इंडेंटेशनसाठी आहेत. या सर्व गुणधर्मांची मूल्ये पिक्सेल (px), टक्केवारी (%) किंवा em युनिट्समध्ये असू शकतात.
तत्वतः, ते सर्व आहे. तथापि, त्यांच्याबरोबर काम करण्याची काही वैशिष्ट्ये अजूनही आहेत.

मार्जिन आणि पॅडिंगची वैशिष्ट्ये

जर ब्लॉक्समध्ये CSS फ्लोट प्रॉपर्टी असेल, तर तुम्हाला ब्लॉक्सना डिस्प्ले:इनलाइन नियुक्त करणे आवश्यक आहे जेणेकरून डावीकडे आणि उजवीकडे दुहेरी मार्जिन नसतील (अधिक तपशीलांसाठी, इंटरनेट एक्सप्लोरर 6 आणि CSS मार्जिन कसे बनवायचे हा लेख पहा. मालमत्ता चांगले काम करते?)

पॅडिंग वापरताना, पॅडिंगची परिमाणे ब्लॉकच्या उंची आणि रुंदीमधून वजा करणे आवश्यक आहे, अन्यथा ब्लॉकचा आकार पॅडिंगच्या आकाराने वाढेल.

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

टेबलमध्ये पॅडिंग आणि मार्जिन वापरणे उचित नाही कारण वेगवेगळ्या ब्राउझरमध्ये परिणाम अप्रत्याशित असेल.
आणि शेवटची गोष्ट मला सांगायची होती. शॉर्टहँड नोटेशन रचना वापरण्यास विसरू नका, जसे की समास: 10px 0 5px 20px;. जर इंडेंटेशन शून्य असेल, तर तुम्ही पॅरामीटर्स निर्दिष्ट न करता फक्त शून्य ठेवू शकता. कोणते पॅरामीटर्स कोणत्या सीमेशी संबंधित आहेत हे लक्षात ठेवणे खूप सोपे आहे - ब्लॉकसाठी, इंडेंट्स घड्याळाच्या दिशेने जातात: पहिला क्रमांक वर आहे, दुसरा उजवीकडे आहे, तिसरा तळाशी आहे, चौथा आहे बाकी
खरंतर आज मला तुला एवढंच सांगायचं होतं. सर्वांना शनिवार व रविवारच्या शुभेच्छा!
+

या विषयात आपण सामग्रीबद्दल प्रश्न विचारू शकता.

मार्जिन आणि पॅडिंगमधील फरक पाहू. हे करण्यासाठी, CSS मधील ब्लॉक मॉडेल पुन्हा एकदा लक्षात ठेवूया.

मार्जिन -हे ब्लॉकच्या बॉर्डरपासून (फ्रेम) जवळच्या घटकांपर्यंत किंवा दस्तऐवजाच्या काठापर्यंतचे अंतर आहे.

पॅडिंग -सीमा (फ्रेम) आणि ब्लॉकमधील सामग्रीमधील अंतर्गत अंतराप्रमाणे.

उदाहरण: चला भिन्न मार्जिन आणि पॅडिंग मूल्यांसह तीन भिन्न परिच्छेदांसाठी तीन शैली तयार करू आणि परिणाम पाहू:

त्या. मूल्ये घड्याळाच्या दिशेने लिहिलेली आहेत: वर, उजवीकडे, तळाशी, डावीकडे.

कोणत्या प्रकरणांमध्ये इंडेंटेशन वापरणे चांगले आहे आणि कोणत्या प्रकरणांमध्ये मार्जिन वापरणे चांगले आहे?

काही प्रमुख फरक:

इंडेंट (पॅडिंग) ब्लॉकच्या आत स्थित आहेत आणि मार्जिन (मार्जिन) त्यांच्या बाहेर स्थित आहेत;

ब्लॉक पार्श्वभूमी आणि पार्श्वभूमी प्रतिमा केवळ पॅडिंगवर लागू होते, समासावर नाही. मार्जिन नेहमी पारदर्शक असतात, जे मूळ घटकाची पार्श्वभूमी दर्शवू देतात.

14. ब्लॉक्सची उंची आणि रुंदी

डीफॉल्टनुसार, ब्लॉक्सची उंची आणि रुंदी स्वयंचलितपणे निर्धारित केली जाते, म्हणजे. जितका अधिक मजकूर (किंवा इतर सामग्री) तितका रुंद आणि उच्च ब्लॉक.

परंतु, CSS तंत्रज्ञानाचा वापर करून, आम्ही आवश्यक असलेल्या ब्लॉक्सची रुंदी आणि उंची सेट करू शकतो.

उंची- ब्लॉकची उंची सेट करणारी मालमत्ता;

रुंदी- ब्लॉकची रुंदी सेट करणारी मालमत्ता;

सहसा, घटक CSS मध्ये ब्लॉक म्हणून वापरला जातो DIV. तथापि, रुंदी आणि उंचीचे गुणधर्म परिच्छेद, सूची इत्यादींवर देखील लागू केले जाऊ शकतात.

चला 4 वर्ग तयार करू आणि त्यांना एकामागून एक समान बॉक्समध्ये नियुक्त करूया (या प्रकरणात DIV) मजकुरासह.

आता उंची निश्चित केली आहे, आणि सामग्री फिट करण्यासाठी रुंदी वाढविली आहे.

.box3(रुंदी: 300px; उंची: 600px; सीमा: 1px घन लाल; पार्श्वभूमी: #FFE446; )

येथे उंची आणि रुंदी दोन्ही निश्चित आहेत.

.box4(रुंदी: 300px; उंची: 300px; सीमा: 1px घन लाल; पार्श्वभूमी: #FFE446; )

आणि जर सामग्री फिट होत नसेल तर निश्चित रुंदी आणि उंचीचा बॉक्स कसा दिसेल याचे हे उदाहरण आहे. मजकूर फक्त ब्लॉकच्या पलीकडे जातो.

लक्षात ठेवा!

अशा प्रकारे, ब्लॉकची रुंदी निर्दिष्ट करून, तुम्ही ब्लॉकच्या फक्त त्या भागाची रुंदी निर्दिष्ट करत आहात जो सामग्रीसाठी आरक्षित आहे.

स्रोत: मार्जिन किंवा पॅडिंग?
फिलिप स्पोरर.
अनुवाद: vl49.

मार्जिन वापरणे केव्हा चांगले आहे आणि फॉरमॅटिंगसाठी पॅडिंग कधी वापरावे आणि त्यामुळे काही फरक पडतो का?

योग्य उत्तरांच्या शोधात मी बराच काळ संघर्ष केला. विविध दुष्परिणामांसह अनेक भयंकर, अपरिहार्य CSS कोड लिहिल्यानंतरच, मी आत्मविश्वासाने सांगू शकलो की मला वर सूचीबद्ध केलेल्या मुद्द्यांचे मूलभूत लोखंडी नियम सापडले आहेत.

स्पष्टतेसाठी, 2017 मधील प्रत्येक वापरकर्ता इंटरफेस विकसकाला बहुधा परिचित असलेली ठराविक परिस्थिती पाहू या. आमच्याकडे एक साधे कार्ड टेम्पलेट आहे.

या उदाहरणात, दोन प्रकारचे मध्यांतर ओळखले जाऊ शकतात:

कार्ड्स दरम्यान (निळा);

कार्ड आणि त्यांचे कंटेनर (हिरवे);

येथे हे समजून घेणे फार महत्वाचे आहे की आम्ही दोन भिन्न संकल्पना हाताळत आहोत ज्या एकत्र केल्यावर एकमेकांशी संबंधित नसल्या पाहिजेत. म्हणजेच, जर मला कार्डे आणि त्यांच्या कंटेनरमधील अंतर बदलण्याची आवश्यकता असेल, उदाहरणार्थ, 24 पिक्सेल, तर याचा कोणत्याही प्रकारे कार्डांमधील अंतरावर परिणाम होऊ नये.

CSS वापरून उदाहरणाची अंमलबजावणी करत आहात?

मार्जिन आणि पॅडिंग वापरून यासारखे टेम्पलेट तयार करण्याचे अक्षरशः हजारो मार्ग आहेत, परंतु मी मार्जिन आणि पॅडिंग गुणधर्मांचा योग्य वापर दर्शवणारे एक सादर करू इच्छितो. शिवाय, ही पद्धत आपल्याला भविष्यात इतर कार्ड जोडण्याची परवानगी देते.

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

फक्त 2 निवडकर्ते आणि 2 नियम.

अधिक चिन्ह कोणते कार्य करते?

चिन्ह + प्रतिनिधित्व करते समीप निवडकर्ता. हे फक्त त्या घटकाकडे निर्देश करते जे या निवडकापूर्वी निर्दिष्ट केलेल्या घटकाचे लगेच अनुसरण करते.

वरील प्रतिमेवरून पाहिल्याप्रमाणे, आमच्या बाबतीत, हा निवडकर्ता निवडेल प्रत्येक कार्ड जे इतर कोणत्याही कार्डाच्या आधी आहे. तर, समीप निवडक वापरून, आम्ही पहिले कार्ड वगळता प्रत्येक कार्डसाठी डावे मार्जिन सेट करू शकतो.

याचा अर्थ असा की आमच्याकडे कितीही आवश्यक कार्डे जोडण्याची क्षमता आहे, ज्यामधील अंतर नेहमी आठ पिक्सेल असेल.

जोपर्यंत आम्हाला कार्ड्सच्या पुढे कार्ड सोडून दुसरे काहीतरी ठेवण्याची आवश्यकता नाही तोपर्यंत सर्व काही ठीक चालते. बरं, एक बटण म्हणूया "कार्ड जोडा" ("कार्ड जोडा"):

विद्यमान CSS कोड स्निपेटनुसार, आम्ही बहुधा .card हे कार्ड नसल्यामुळे बटणाचे प्रतिनिधित्व करणाऱ्या नवीन घटकाला वर्ग .card नियुक्त करणार नाही. कसे असावे? यासाठी अतिरिक्त वर्ग नाव .add-card तयार करणे फायदेशीर आहे, ज्यामध्ये .card वर्गाप्रमाणेच मार्जिन गुणधर्माचा नियम आहे? नाही, एक चांगला उपाय आहे.

लोबोटोमाइज्ड घुबड *+* .

ते कशासारखे दिसते? मजेदार सहवास असूनही, ही पद्धत उत्तम कार्य करते आणि जेव्हापासून मला तिचे अस्तित्व कळले तेव्हापासून मी ती सतत वापरत आहे. मग हे सर्व काय आहे? संबंधित CSS कोड येथे पहा:

कंटेनर (
पॅडिंग: 16px;
}
/* बरं, तुम्ही लोबोटोमाइज्ड उल्लू ओळखले का? 😜 */
.कंटेनर > * + * (
समास: 0 0 0 8px;
}

तुम्हाला आठवत असेल की, मागील निवडकर्ता कोणत्याही कार्डवर लागू केला गेला होता जो दुसऱ्या कार्डाच्या आधी होता. आता त्याच्या मदतीने आपण फॉरमॅट करू शकतो प्रत्येक घटक ज्याच्या आधी इतर कोणताही घटक आहे, अर्थातच बटणासह.

अखेरीस.

मला आशा आहे की येथे सादर केलेल्या सामग्रीने तुम्हाला पॅडिंग कधी वापरायचे आणि कंटेनरमधील सामग्री विभक्त करण्यासाठी मार्जिन कधी वापरायचे हे समजण्यास मदत केली आहे.

परिणामी, मी तुमच्या विचारार्थ वरील उदाहरणे दाखवणारा पेन-प्रोजेक्ट सादर करू इच्छितो, तसेच माझ्या स्वतःच्या अनुभवावरून तपासलेले दोन नियम. तर, चला वापरुया:

पॅडिंग— कंटेनर आणि त्यातील सामग्रीमधील मोकळ्या जागेसाठी.

समास— कंटेनरमधील घटकांमधील मोकळ्या जागेसाठी.

• ट्यूटोरियल

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

पृष्ठावरील स्थिती घटकांच्या वातावरणात खालील तत्त्वे लागू केली जातात. ते सजावटीच्या घटकांमध्ये देखील वापरले जातात. परंतु इतके स्पष्टपणे नाही.

मूलभूत तत्त्वे:

1. घरातील शेवटच्या संभाव्य घटकाला इंडेंटेशन दिले जाते.
2. स्वतंत्र घटकांसाठी (BEM ब्लॉक) इंडेंट सेट केले जाऊ शकत नाहीत.
3. गटाच्या शेवटच्या घटकासाठी, इंडेंट शून्य (नेहमी) वर रीसेट केला जातो.

इंडेंट मागील घटकापासून पुढील घटकाकडे जातात.

मार्जिन मागील घटकापासून पुढील, पहिल्यापासून दुसऱ्यापर्यंत, वरपासून खालपर्यंत, डावीकडून उजवीकडे सेट केले जातात.

याचा अर्थ असा की गुणधर्म जसे की समास-डावीकडे आणि समास-टॉप वापरलेले नाहीत(अपवादांशिवाय नाही). पॅडिंगसह, सर्वकाही थोडे विरुद्ध आहे (त्याशिवाय ते सजावटीच्या हेतूंसाठी वापरले जाते, लिंक क्षेत्र वाढवणे इ.). जेव्हा ब्लॉकला शीर्षस्थानी किंवा डावीकडे पॅडिंग आवश्यक असते, तेव्हा ते पालकांच्या पॅडिंग-टॉप आणि पॅडिंग-डावीकडून मिळते.

इंडेंटेशन्स ट्री हाऊसच्या प्रवाहाच्या दिशेने जातात, ब्लॉक स्वतःला ढकलत नाही.
सुरुवातीला, तो स्थिर स्थितीत असतो आणि इतरांच्या खर्चावर काही प्रकारचा प्रभाव प्राप्त करतो.

घरातील शेवटच्या संभाव्य घटकाला इंडेंटेशन दिले जाते

मार्जिन फक्त ट्री हाऊसच्या समीप घटकांमध्ये सेट केले जातात.

उदाहरणामध्ये खालील संरचनेत 3 याद्या आहेत:

इंडेंटेशन बाल घटकांच्या खर्चावर नाही तर शेजारच्या घटकांच्या खर्चावर केले जाते.

या स्थितीत, .main-section__item हा शेवटचा संभाव्य आहे जो याद्या विभक्त करण्यासाठी इंडेंट केला जाऊ शकतो. div, सूची, एक ओळ किंवा लिंक इंडेंट करून समान प्रभाव प्राप्त केला जाऊ शकतो, परंतु हे योग्य होणार नाही.

हे उदाहरण अगदी सोपे आहे. परंतु जर तुम्ही एका मोठ्या घरट्याची कल्पना केली तर, जिथे कोणीतरी इंडेंट्सने कचरा टाकला आहे, जेव्हा काही समास कोसळतात. आणि काही पॅडिंगमध्ये जोडले जातात.

सात शब्दांच्या विभागात शीर्षक

आम्ही शीर्षकाचे उदाहरण घेतल्यास, आणि तुम्हाला शीर्षस्थानी शीर्षक इंडेंट करणे आवश्यक आहे. नंतर शेवटचा घटक विभाग असेल आणि पॅडिंग-टॉप त्याच्यासाठी सेट केले जाईल, मार्जिन(चे) जे डीफॉल्ट आहेत ते नेहमी रीसेट करणे आवश्यक आहे.

तुम्ही या तत्त्वाचे पालन का केले पाहिजे याचे सर्वात सोपे कारण म्हणजे भविष्यात तुमच्यासाठी किंवा भविष्यात तुमच्या लेआउटसह काम करणाऱ्या व्यक्तीसाठी इंडेंटेशन शोधणे सोपे करणे. हे सोयीबद्दल आहे.

जेव्हा खराब इंडेंटेशन स्ट्रक्चरसह लेआउट डायनॅमिक किंवा डुप्लिकेट केले जाते तेव्हा वास्तविक समस्या उद्भवू शकतात.

स्वतंत्र घटकांसाठी (बीईएम ब्लॉक) इंडेंट सेट केले जाऊ शकत नाहीत.

एकापेक्षा जास्त वेळा वापरले जाणारे घटक कधीही इंडेंट करू नका. जरी तुम्ही पद्धतींचे पालन केले नाही, तरी गोष्टी दृष्टीकोनात ठेवा. यासाठी रॅपर्स आहेत. रॅपर्स चांगले आहेत. किंवा अतिरिक्त वर्ग.

जर तुम्हाला ब्लॉक इंडेंट करायचा असेल. पूर्वग्रह न ठेवता, हे वापरून केले जाते:

• घटकाद्वारे इनहेरिटन्स (जर तुम्ही हा ब्लॉक एलिमेंटमधून खेचला तर तेथे कोणतेही इंडेंटेशन नसेल आणि तुम्ही ते दुसऱ्या ठिकाणी ठेवू शकता).
• वर्ग जोडणे (तुम्ही ब्लॉकला घटक बनवू शकता).
• रॅपर (अशा ब्लॉकप्रमाणे ज्यामध्ये भूमिका असते, फक्त स्थितीत).

.block__item > .block ( समास-उजवीकडे: 10px; ) .block.block__item ( समास-उजवीकडे: 10px; ) .block-wrap > .block ( समास-उजवीकडे: 10px; )

गटाच्या शेवटच्या घटकामध्ये इंडेंटेशन शून्यावर रीसेट केले आहे (नेहमी)

उदाहरण म्हणून एक यादी आणि प्रतिमा घेऊ.

हा एक क्षैतिज मेनू आणि लोगो आहे (जे काही कारणास्तव उजवीकडे आहे).

शेवटच्या li साठी, इंडेंटेशन शून्य वर रीसेट केले आहे. आणि इंडेंटेशन केले जाते समीप घटक दरम्यान ul आणि img. दुसऱ्या तत्वात काय चर्चा झाली.

आणखी एक उदाहरण घेऊ:

आम्हाला set.blog-preview__item (margin-bottom: 20px;) बातम्यांमधील फरकामध्ये स्वारस्य आहे. शेवटचा समास शून्यावर रीसेट केला आहे आणि तळाशी इंडेंटेशन ब्लॉग-पूर्वावलोकन पॅडिंगद्वारे केले आहे. दुसऱ्या तत्वात काय चर्चा झाली.

इतर छद्म-वर्गांपेक्षा अधिक वेळा, आपण वापरावे:अंतिम-चाइल्ड.

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

अपवाद

अर्थात, काही विशेष प्रकरणे, क्षुल्लक कार्ये आणि बारकावे आहेत ज्यात या तत्त्वांचे पालन करणे अशक्य आहे, परंतु अन्यथा लेआउट शक्य तितके स्वच्छ करण्यासाठी आदर्श इंडेंटेशनसाठी प्रयत्न करणे योग्य आहे.

P.S.मी तुम्हाला प्रकाशन वाचण्याचा सल्ला देतो