టైల్‌విండ్‌లో క్షితిజసమాంతర మరియు నిలువు పాడింగ్‌ను ఎలా జోడించాలి?

Tail Vind Lo Ksitijasamantara Mariyu Niluvu Pading Nu Ela Jodincali



టైల్‌విండ్ CSSలో, పాడింగ్ నిర్దిష్ట మూలకం యొక్క కంటెంట్ మరియు దాని సరిహద్దు మధ్య ఖాళీ. క్షితిజసమాంతర పాడింగ్ మూలకం యొక్క ఎడమ మరియు కుడి వైపున ఉన్న స్థలం, అయితే నిలువు పాడింగ్ మూలకం యొక్క ఎగువ మరియు దిగువన ఉన్న స్థలం. టైల్‌విండ్ కావలసిన మూలకాలకు క్షితిజ సమాంతర లేదా నిలువు పాడింగ్‌ను జోడించడానికి వివిధ యుటిలిటీ తరగతులను అందిస్తుంది.

ఈ వ్యాసం వివరిస్తుంది:







టైల్‌విండ్‌లో క్షితిజసమాంతర పాడింగ్‌ను ఎలా జోడించాలి?

Tailwindలోని మూలకానికి క్షితిజసమాంతర పాడింగ్‌ని జోడించడానికి, HTML ప్రోగ్రామ్‌లో కావలసిన మూలకంతో “px-” క్లాస్ ఉపయోగించబడుతుంది. పాడింగ్ పరిమాణం కోసం వినియోగదారులు వేర్వేరు విలువలను పేర్కొనవచ్చు. ఈ తరగతి x-అక్షం వెంట పాడింగ్‌ను జోడిస్తుంది, అనగా మూలకం యొక్క ఎడమ మరియు కుడి వైపుల రెండింటికీ.



వాక్యనిర్మాణం



< మూలకం తరగతి = 'px-0 ...' > ... మూలకం >


ఇక్కడ 'px' అనేది 'x-axis' లేదా 'క్షితిజ సమాంతర పాడింగ్'ని సూచిస్తుంది.





ఉదాహరణ: HTML ఎలిమెంట్‌కు క్షితిజసమాంతర పాడింగ్‌ని వర్తింపజేయడం

ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము px-20 'యుటిలిటీ క్లాస్' తో

దానికి క్షితిజ సమాంతర పాడింగ్‌ని జోడించడానికి మూలకం:



< శరీరం >

< div తరగతి = 'bg-pink-600 px-20 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


అవుట్‌పుట్


ఎగువ అవుట్‌పుట్ కంటైనర్‌కు ఎడమ మరియు కుడి వైపులా పాడింగ్‌ను చూపుతుంది. కంటైనర్ ఎలిమెంట్‌కు క్షితిజ సమాంతర పాడింగ్ విజయవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది.

టైల్‌విండ్‌లో వర్టికల్ పాడింగ్‌ను ఎలా జోడించాలి?

టైల్‌విండ్‌లోని మూలకానికి నిలువు పాడింగ్‌ని జోడించడానికి, “ని ఉపయోగించండి py- HTML ప్రోగ్రామ్‌లోని నిర్దిష్ట మూలకంతో యుటిలిటీ క్లాస్. ఈ తరగతి y-అక్షం వెంట పాడింగ్‌ను జోడిస్తుంది, అంటే మూలకం యొక్క ఎగువ మరియు దిగువ రెండు వైపులా.

వాక్యనిర్మాణం

< మూలకం తరగతి = 'py-0 ...' > ... మూలకం >


ఇక్కడ 'py' అనేది 'y-axis' లేదా 'vertical padding'ని సూచిస్తుంది.

ఉదాహరణ: HTML మూలకానికి నిలువు పాడింగ్‌ని వర్తింపజేయడం

ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము పై-20 'యుటిలిటీ క్లాస్' తో

దానికి నిలువు పాడింగ్‌ని జోడించడానికి మూలకం:

< శరీరం >

< div తరగతి = 'bg-pink-600 py-20 w-max' >
పాడింగ్ లో టైల్‌విండ్ CSS
div >

శరీరం >


అవుట్‌పుట్


పై అవుట్‌పుట్ కంటైనర్ యొక్క ఎగువ మరియు దిగువ వైపులా పాడింగ్‌ను చూపుతుంది. కంటైనర్ ఎలిమెంట్‌కు నిలువు పాడింగ్ సమర్థవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది.

ముగింపు

టైల్‌విండ్‌లో క్షితిజ సమాంతర మరియు నిలువు పాడింగ్‌ను జోడించడానికి, ' px- 'మరియు' py- ” యుటిలిటీ క్లాసులు వరుసగా HTML ప్రోగ్రామ్‌లో కావలసిన అంశాలతో ఉపయోగించబడతాయి. ఎలిమెంట్ యొక్క ఎడమ మరియు కుడి లేదా ఎగువ మరియు దిగువకు పాడింగ్‌ను వర్తింపజేయడానికి వినియోగదారులు విభిన్న విలువలను పేర్కొనవచ్చు. ఈ కథనం టైల్‌విండ్‌లో క్షితిజ సమాంతర మరియు నిలువు ప్యాడింగ్‌ను వర్తింపజేయడానికి పూర్తి పద్ధతిని వివరించింది.