चला कायम लक्षात ठेवा: मार्जिन आणि पॅडिंगमध्ये काय फरक आहे. पॅडिंग आणि मार्जिन गुणधर्म आणि ते कसे वापरावे

आज आपण HTML पॅडिंगमधील फरक समजून घेण्यावर काम करू. पॅडिंग) आणि CSS मध्ये मार्जिन (मार्जिन). पण प्रथम, त्यांची वाक्यरचना समजून घेऊ. हे गुणधर्म लिहिण्याचे अनेक मार्ग आहेत: नियमित आणि लघुलेख:

CSS मध्ये पॅडिंग आणि मार्जिन

प्रश्नातील गुणधर्मांसाठी नोटेशनचे सामान्य स्वरूप समजणे सोपे आहे कारण ते इतर सर्व शैली नोटेशन्ससारखेच आहे:

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

पॅडिंग-टॉप: 10px;

पॅडिंग-उजवे: 20px; पॅडिंग-तळ: 10px;«.

पॅडिंग-डावीकडे: 20px;

दुसरीकडे, CSS शॉर्टहँड या सर्व गुणधर्मांना एका सामान्य गुणधर्मामध्ये एकत्र करते "

पॅडिंग संक्षिप्त नोंद:पॅडिंग: 10px 20px 40px 10px;

पॅडिंग आणि मार्जिनमध्ये चार मूल्ये आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे. वर दर्शविलेले शॉर्टहँड नोटेशन स्पेसने विभक्त केलेली चार मूल्ये देखील निर्दिष्ट करते. चार मूल्यांपैकी पहिले शीर्ष इंडेंट, नंतर उजवे इंडेंट, तळाशी (

पॅडिंग तळाशी HTML

) आणि डावीकडे:

पॅडिंग: वरच्या उजव्या तळाशी डावीकडे; (पॅडिंग: वर उजवीकडे खाली डावीकडे)

डावे आणि उजवे पॅडिंग/मार्जिन समान असल्यास ही नोंद तीन मूल्यांपर्यंत कमी केली जाऊ शकते. उदाहरणार्थ, जर वरचा मार्जिन 30px असेल, डावीकडे आणि उजवीकडे 10px असेल आणि तळाशी 40px असेल, तर तुम्ही खालील नोटेशन वापरू शकता:

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

आम्ही ते दोन मूल्यांमध्ये कमी करतो!

जर वरचे आणि खालचे पॅडिंग/मार्जिन समान असतील आणि उजवे आणि डावे पॅडिंग/मार्जिन देखील समान असतील, तर फक्त दोन मूल्ये निर्दिष्ट केली जाऊ शकतात. या उदाहरणात, आमच्याकडे 10px चे वरचे आणि खालचे पॅडिंग आहे आणि 20px चे डावे आणि उजवे पॅडिंग आहे. आमचे CSS असे दिसेल: पॅडिंग: वर/खाली उजवी/डावीकडे; (पॅडिंग: वर/खाली उजवी/डावीकडे) पॅडिंग: 10px 20px;एकच अर्थ!

पॅडिंग आणि मार्जिनसाठी आमच्या HTML शॉर्टहँडच्या नवीनतम आवृत्तीमध्ये फक्त एक मूल्य आहे. हे नोटेशन वापरले जाऊ शकते जेव्हा सर्व इंडेंट (

वर, खाली, उजवीकडे आणि डावीकडे

) समान अर्थ आहे. आम्हाला सर्व बाजूंना 20px पॅडिंग हवे असल्यास, CSS असे दिसेल:

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

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

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

साइटच्या उदाहरणावर पॅडिंग आणि मार्जिन

घटकांसह उदाहरणे वापरून गुणधर्म पाहू. आम्ही एका परिच्छेदाने सुरुवात करू (टॅग

), नंतर त्यात पार्श्वभूमी रंग जोडा आणि प्रत्येक बाजूला 30px पॅडिंग जोडा.

खाली डावीकडे तुम्ही पाहू शकता की तो एक परिच्छेद आहे ज्याच्या भोवती 30px पॅडिंग आहे. उजवीकडील प्रतिमेमध्ये, या घटकासाठी HTML पॅडिंग कोठे सुरू होते/समाप्त होते हे दर्शविण्यासाठी मी Google Chrome साधने वापरली. खालील प्रतिमेतील हिरवा रंग डब्याभोवती ठेवलेला पॅडिंग आहे. गडद निळा पार्श्वभूमी रंग आतील भाग भरतो:

आता परिच्छेदात मार्जिन जोडू. मी 30px वरचे आणि खालचे पॅडिंग, तसेच 20px डावीकडे आणि उजवीकडे जोडेन. डावीकडील खालील प्रतिमा दाखवते की हा परिच्छेद समासातून कसा बदलला आहे. प्रतिमेची वास्तविक रुंदी लहान आहे कारण समास दुसऱ्या HTML घटकाला सीमारेषेपासून दूर ढकलतो. उजवीकडे तुम्ही पाहू शकता की केशरी रंग हा घटकाभोवतीचा समास आहे. समास नेहमी पॅडिंगच्या बाहेर असतो आणि गडद निळा पार्श्वभूमी समास क्षेत्रामध्ये विस्तारत नाही:

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

लेखाचे भाषांतर " CSS पॅडिंग वि. मार्जिन आणि त्यांचा वापर कसा करायचा” मैत्रीपूर्ण प्रकल्प संघाने तयार केले होते.

चांगले वाईट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लक्षात ठेवा!

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

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

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

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

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

तत्वतः, ते सर्व आहे. तथापि, त्यांच्याबरोबर काम करण्याची काही वैशिष्ट्ये अजूनही आहेत.

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

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

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

टेबलमध्ये पॅडिंग आणि मार्जिन वापरणे उचित नाही कारण वेगवेगळ्या ब्राउझरमध्ये परिणाम अप्रत्याशित असेल.

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

खरंतर आज मला तुला एवढंच सांगायचं होतं. सर्वांना शनिवार व रविवारच्या शुभेच्छा!

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

चला div बनवू आणि त्याला गुणधर्म मार्जिन, पॅडिंग आणि बॉर्डर देऊ.

पॅडिंग मालमत्ता

CSS पॅडिंग गुणधर्म घटकाच्या सीमा आणि त्याच्या सामग्रीमधील अंतर निर्दिष्ट करते. आपण ते याप्रमाणे परिभाषित करू शकता:

• पॅडिंग-टॉप: 10px;
• पॅडिंग-उजवे: 10px;
• पॅडिंग-तळ: 10px;
• पॅडिंग-डावीकडे: 10px;

ही नोंद लहान केली जाऊ शकते:

• पॅडिंग: 25px 50px 75px 100px;
  • शीर्ष 25px
  • उजवीकडे 50px
  • तळ 75px
  • डावीकडे 100px
• पॅडिंग: 25px 50px 75px;
  • शीर्ष 25px
  • उजवीकडे आणि डावीकडे 50px
  • तळ 75px
• पॅडिंग: 25px 50px;
  • शीर्ष आणि तळ 25px
  • उजवीकडे आणि डावीकडे 50px
• पॅडिंग: 25px;
  • सर्व 25px

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

दुसऱ्या शब्दांत, आमच्याकडे वर्ग div-1 सह div घटक आहे:

Div.div-1(रुंदी:150px; पॅडिंग: 25px;)

ब्राउझर घटकाच्या रुंदीमध्ये डावे आणि उजवे पॅडिंग जोडेल. परिणामी, आम्हाला 200px रुंदीचा घटक मिळेल.

सीमा मालमत्ता

CSS बॉर्डर प्रॉपर्टी तुम्हाला घटकाच्या बॉर्डरची शैली आणि रंग परिभाषित करण्यास अनुमती देते.

सीमा-रुंदी

सीमा-रुंदी गुणधर्म सीमेची रुंदी निर्धारित करण्यासाठी वापरला जातो. रुंदी पिक्सेलमध्ये किंवा पूर्वनिर्धारित मूल्यांपैकी एक वापरून निर्दिष्ट केली जाते: पातळ, मध्यम किंवा जाड.

सीमा-रंग

बॉर्डर-रंग गुणधर्म सीमेचा रंग परिभाषित करण्यासाठी वापरला जातो. रंग खालील प्रकारे सेट केला जाऊ शकतो:

• नाव - रंगाचे नाव, उदाहरणार्थ, "लाल"
• RGB - RGB मूल्य परिभाषित करते, उदाहरणार्थ, "rgb(255,0,0)"
• हेक्स - हेक्स मूल्य परिभाषित करते, उदाहरणार्थ, "#ff0000"

सीमा शैली

• ठिपके: अचूक सीमा परिभाषित करते
• डॅश: ठिपकेदार सीमा परिभाषित करते
• घन: जाड सीमा परिभाषित करते
• दुप्पट: दोन सीमा परिभाषित करते. त्यांच्यातील अंतर सीमा-रुंदीच्या मूल्यावर अवलंबून असते
• खोबणी: 3D उदासीन सीमा परिभाषित करते
• रिज: 3D बहिर्वक्र सीमा परिभाषित करते
• इनसेट: सीमा परिभाषित करते जेणेकरून ब्लॉक दाबला जातो
• सुरुवात: सीमा परिभाषित करते जेणेकरून ब्लॉक बहिर्वक्र फिरेल

तुम्ही घटकाची सीमा गुणधर्म लघुलेखन पद्धतीने लिहू शकता:

Div.div-2( सीमा:1px घन #ccc;)

मार्जिन मालमत्ता

CSS मार्जिन गुणधर्म घटकाभोवती किती जागा आहे हे निर्दिष्ट करते. मार्जिन घटकाभोवतीची जागा (सीमेच्या बाहेर) साफ करते. मार्जिनला कोणताही पार्श्वभूमी रंग नसतो आणि तो नेहमी पारदर्शक राहतो.

तुम्ही यासारख्या घटकासाठी मार्जिन मूल्ये परिभाषित करू शकता:

• margin-top:100px;
• margin-bottom:100px;
• समास-उजवे:50px;
• समास-डावीकडे:50px;

ही नोंद लहान केली जाऊ शकते:

• समास:25px 50px 75px 100px;
  • शीर्ष मार्जिन 25px
  • उजवा समास 50px
  • तळ समास 75px
  • डावे समास 100px
• समास:25px 50px 75px;
  • शीर्ष मार्जिन 25px
  • उजवा आणि डावा समास 50px
  • तळ समास 75px
• समास:25px 50px;
  • शीर्ष आणि खालचा समास 25px
  • उजवा आणि डावा समास 50px
• समास:25px;
  • सर्व चार मार्जिन 25px

डीफॉल्ट मार्जिन मूल्ये वापरून तुम्ही ब्लॉकला क्षैतिज मध्यभागी ठेवू शकता.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

शेवटी.

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

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

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

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