టైల్విండ్ CSSలో, పాడింగ్ నిర్దిష్ట మూలకం యొక్క కంటెంట్ మరియు దాని సరిహద్దు మధ్య ఖాళీ. క్షితిజసమాంతర పాడింగ్ మూలకం యొక్క ఎడమ మరియు కుడి వైపున ఉన్న స్థలం, అయితే నిలువు పాడింగ్ మూలకం యొక్క ఎగువ మరియు దిగువన ఉన్న స్థలం. టైల్విండ్ కావలసిన మూలకాలకు క్షితిజ సమాంతర లేదా నిలువు పాడింగ్ను జోడించడానికి వివిధ యుటిలిటీ తరగతులను అందిస్తుంది.
ఈ వ్యాసం వివరిస్తుంది:
టైల్విండ్లో క్షితిజసమాంతర పాడింగ్ను ఎలా జోడించాలి?
Tailwindలోని మూలకానికి క్షితిజసమాంతర పాడింగ్ని జోడించడానికి, HTML ప్రోగ్రామ్లో కావలసిన మూలకంతో “px-
వాక్యనిర్మాణం
< మూలకం తరగతి = 'px-0 ...' > ... మూలకం >
ఇక్కడ 'px' అనేది 'x-axis' లేదా 'క్షితిజ సమాంతర పాడింగ్'ని సూచిస్తుంది.
ఉదాహరణ: HTML ఎలిమెంట్కు క్షితిజసమాంతర పాడింగ్ని వర్తింపజేయడం
ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము px-20 'యుటిలిటీ క్లాస్' తో టైల్విండ్లోని మూలకానికి నిలువు పాడింగ్ని జోడించడానికి, “ని ఉపయోగించండి py- వాక్యనిర్మాణం ఉదాహరణ: HTML మూలకానికి నిలువు పాడింగ్ని వర్తింపజేయడం ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము పై-20 'యుటిలిటీ క్లాస్' తో టైల్విండ్లో క్షితిజ సమాంతర మరియు నిలువు పాడింగ్ను జోడించడానికి, ' px-
< శరీరం >
< div తరగతి = 'bg-pink-600 px-20 w-max' >
పాడింగ్ లో టైల్విండ్ CSS
div >
శరీరం >
అవుట్పుట్
ఎగువ అవుట్పుట్ కంటైనర్కు ఎడమ మరియు కుడి వైపులా పాడింగ్ను చూపుతుంది. కంటైనర్ ఎలిమెంట్కు క్షితిజ సమాంతర పాడింగ్ విజయవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది. టైల్విండ్లో వర్టికల్ పాడింగ్ను ఎలా జోడించాలి?
ఇక్కడ 'py' అనేది 'y-axis' లేదా 'vertical padding'ని సూచిస్తుంది.
< div తరగతి = 'bg-pink-600 py-20 w-max' >
పాడింగ్ లో టైల్విండ్ CSS
div >
శరీరం >
అవుట్పుట్
పై అవుట్పుట్ కంటైనర్ యొక్క ఎగువ మరియు దిగువ వైపులా పాడింగ్ను చూపుతుంది. కంటైనర్ ఎలిమెంట్కు నిలువు పాడింగ్ సమర్థవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది. ముగింపు