CSSలో మార్జిన్ vs పాడింగ్ ఎప్పుడు ఉపయోగించాలి

'క్లాస్ కలిగి ఉన్న కంటైనర్' మార్జిన్-డివి 'మరియు వర్తించు' శైలి 'లక్షణం' అంచు:1px ఘన నలుపు ”. ఆ తర్వాత, “లో కొంత వచనాన్ని జోడించండి

”ట్యాగ్:

< div తరగతి = 'మార్జిన్-డివి' శైలి = 'సరిహద్దు:1px ఘన నలుపు' >
< p > Linuxhint అత్యుత్తమ ట్యుటోరియల్ వెబ్‌సైట్‌లలో ఒకటి.< br >
< / p >
< div >

అవుట్‌పుట్

ఇప్పుడు, “.margin-div” తరగతిపై “మార్జిన్” లక్షణాన్ని వర్తింపజేయండి:

.మార్జిన్-డివి {
నేపథ్య- రంగు : rgb ( 199 , 238 , 205 ) ;
ఫాంట్- పరిమాణం : మధ్యస్థ;
సరిహద్దు : 3px rgb ( 114 , 250 , 114 ) ;
మార్జిన్: 100px 100px 100px 100px;
}

పై కోడ్‌లో, ' .మార్జిన్-డివి ' దిగువ జాబితా చేయబడిన లక్షణాలను వర్తింపజేయడానికి DIV మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది:

• ' నేపథ్య రంగు ” నేపథ్యంలో రంగును వర్తింపజేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
• ' ఫాంట్ పరిమాణం ” ఫాంట్ పరిమాణాన్ని సర్దుబాటు చేయడానికి ఉపయోగించబడుతుంది.
• ' మార్జిన్ ” మూలకం వెలుపల ఖాళీని కేటాయిస్తుంది. ఉదాహరణకు, మేము “మార్జిన్” లక్షణాన్ని “గా సెట్ చేసాము 100px ”.

ఇక్కడ, మేము విజయవంతంగా సెట్ చేసినట్లు మీరు చూడవచ్చు ' మార్జిన్ 'రెండవ ఆస్తి' div ' మూలకం:

CSSలో 'పాడింగ్' ఎలా ఉపయోగించాలి?

'ప్యాడింగ్' ప్రాపర్టీని ఉపయోగించడానికి, పైన పేర్కొన్న ఉదాహరణలు ఉపయోగించబడ్డాయి. రెండవ లో ' div “కంటైనర్, తరగతిని ఉపయోగించండి” padding-div ” పాడింగ్ దరఖాస్తు చేయడానికి:

< div తరగతి = 'linux' >
< p > Linuxhint ఉత్తమ ట్యుటోరియల్ వెబ్‌సైట్‌లలో ఒకటి < / p >
< / div >
< div తరగతి = 'పాడింగ్-డివ్' శైలి = 'సరిహద్దు:1px ఘన నలుపు' >
< p > Linuxhint అత్యుత్తమ ట్యుటోరియల్ వెబ్‌సైట్‌లలో ఒకటి.< br >
< / p >
< / div >

అవుట్‌పుట్

'పై పాడింగ్ మరియు ఇతర CSS లక్షణాలను వర్తింపజేయడానికి .padding-div 'తరగతి, అందించిన కోడ్‌ను పరిశీలించండి:

.padding-div {
నేపథ్య- రంగు : rgb ( 199 , 238 , 205 ) ;
ఫాంట్- పరిమాణం : మధ్యస్థ;
ప్యాడింగ్: 50px 50px 50px 50px;
}

పైన పేర్కొన్న కోడ్‌లో, మేము రెండవదాన్ని యాక్సెస్ చేసాము ' div 'తరగతిని ఉపయోగించి మూలకం' .padding-div ”. మేము 'నేపథ్యం-రంగు' మరియు 'ఫాంట్ పరిమాణం' సెట్ చేసాము. అంతేకాకుండా, ' పాడింగ్ 'ప్రతి వైపు నుండి మూలకం కంటెంట్ చుట్టూ ఖాళీని జోడించడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది' 50px ”.

అవుట్‌పుట్

మేము CSSలో 'ప్యాడింగ్' మరియు 'మార్జిన్' యొక్క తేడాలు మరియు ఉపయోగాలను వివరించాము.

ముగింపు

CSS' మార్జిన్ మూలకం చుట్టూ అంతరాన్ని సెట్ చేయడానికి ' ఉపయోగించబడుతుంది, అయితే ' పాడింగ్ ” మూలకం కంటెంట్ చుట్టూ అంతరాన్ని జోడించడానికి ఉపయోగించబడుతుంది. మార్జిన్ లేదా ప్యాడింగ్ ప్రాపర్టీని వర్తింపజేయడానికి, ముందుగా, “ని సృష్టించండి div ” కంటైనర్, మరియు తరగతిని పేర్కొనండి. ఆ తర్వాత, తరగతి పేరు ద్వారా తరగతిని యాక్సెస్ చేసి, “ని వర్తింపజేయండి మార్జిన్ 'మరియు' పాడింగ్ 'గుణాలు. ఈ పోస్ట్ CSSలో మార్జిన్ vs పాడింగ్ ఉపయోగాన్ని వివరించింది.