Tailwind CSSలో, నిర్దిష్ట మూలకం యొక్క కంటెంట్ మరియు దాని సరిహద్దుల మధ్య ఖాళీని జోడించడానికి పాడింగ్ ఉపయోగించబడుతుంది. ఇది మూలకం లోపల అదనపు అంతరాన్ని జోడిస్తుంది. టైల్విండ్ CSS పాడింగ్ యుటిలిటీలు మరియు పాడింగ్ విలువల సమితిని అందిస్తుంది, ఇది వినియోగదారులకు కావలసిన మూలకాల అంతరాన్ని అనుకూలీకరించడానికి అనుమతిస్తుంది. అంతేకాకుండా, వినియోగదారులు ఒక నిర్దిష్ట మూలకం యొక్క ఎగువ, దిగువ, ఎడమ లేదా కుడి వంటి ఒకే వైపుకు పాడింగ్ని జోడించవచ్చు.
ఈ బ్లాగ్ Tailwind CSSలో ఒక మూలకం యొక్క ఒక వైపుకు పాడింగ్ని జోడించడానికి ఉదాహరణలను ప్రదర్శిస్తుంది.
టైల్విండ్లో ఒకే వైపుకు పాడింగ్ను ఎలా జోడించాలి?
టైల్విండ్లోని మూలకం యొక్క ఒక వైపుకు పాడింగ్ని జోడించడానికి, క్రింది యుటిలిటీ తరగతులను ఉపయోగించవచ్చు:
దీన్ని బాగా అర్థం చేసుకోవడానికి, దిగువ అందించిన ఉదాహరణలను చూడండి.
ఉదాహరణ 1: ఒక మూలకం యొక్క పైభాగానికి పాడింగ్ని జోడించండి
ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pt-10 'లో యుటిలిటీ క్లాస్' ఉదాహరణ 2: ఎలిమెంట్ దిగువన పాడింగ్ని జోడించండి ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pb-10 'లో తరగతి' ఉదాహరణ 3: ఒక మూలకం యొక్క కుడి వైపున పాడింగ్ని జోడించండి ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pr-10 'లో తరగతి' ఉదాహరణ 4: ఒక మూలకం యొక్క ఎడమ వైపున పాడింగ్ని జోడించండి ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము pl-10 'లో తరగతి' టైల్విండ్లోని మూలకం యొక్క ఒక వైపుకు పాడింగ్ని జోడించడానికి, వివిధ యుటిలిటీ తరగతులను ఉపయోగించవచ్చు, ఉదాహరణకు ' pl-
< div తరగతి = 'bg-pink-600 pt-10 w-max' >
పాడింగ్ లో టైల్విండ్ CSS
div >
శరీరం >
అవుట్పుట్
పై అవుట్పుట్ కంటైనర్ పైభాగానికి పాడింగ్ జోడించబడిందని చూపిస్తుంది.
< div తరగతి = 'bg-pink-600 pb-10 w-max' >
పాడింగ్ లో టైల్విండ్ CSS
div >
శరీరం >
అవుట్పుట్
కంటైనర్ దిగువన పాడింగ్ జోడించబడిందని చూడవచ్చు.
< div తరగతి = 'bg-pink-600 pr-10 w-max' >
పాడింగ్ లో టైల్విండ్ CSS
div >
శరీరం >
అవుట్పుట్
కంటైనర్ మూలకం యొక్క కుడి వైపున పాడింగ్ జోడించబడిందని పై అవుట్పుట్ చూపిస్తుంది.
< div తరగతి = 'bg-pink-600 pl-10 w-max' >
పాడింగ్ లో టైల్విండ్ CSS
div >
శరీరం >
అవుట్పుట్
కంటైనర్ యొక్క ఎడమ వైపున పాడింగ్ జోడించబడిందని గమనించవచ్చు. ముగింపు