Tailwind CSS అందిస్తుంది ' మార్జిన్ ” ఎలిమెంట్స్ చుట్టూ అంతరాన్ని నియంత్రించడానికి వినియోగదారులను ఎనేబుల్ చేసే యుటిలిటీ తరగతులు. ది క్షితిజ సమాంతర మార్జిన్ మూలకం యొక్క ఎడమ మరియు కుడి వైపున ఖాళీని జోడిస్తుంది, అయితే a నిలువు అంచు మూలకం యొక్క ఎగువ మరియు దిగువకు స్థలాన్ని జోడిస్తుంది. Tailwind కావలసిన మూలకాలకు క్షితిజ సమాంతర లేదా నిలువు మార్జిన్లను జోడించడానికి వివిధ యుటిలిటీ తరగతులను అందిస్తుంది.
ఈ వ్యాసం ఉదాహరణగా ఉంటుంది:
టైల్విండ్లో క్షితిజసమాంతర మార్జిన్ను ఎలా జోడించాలి?
టైల్విండ్లోని మూలకానికి క్షితిజ సమాంతర మార్జిన్ని జోడించడానికి, “ mx-
వాక్యనిర్మాణం
< మూలకం తరగతి = 'mx-
ఇక్కడ, 'mx' అనేది 'x-axis' లేదా 'క్షితిజ సమాంతర మార్జిన్'ని సూచిస్తుంది. “
ఉదాహరణ: HTML ఎలిమెంట్కి క్షితిజసమాంతర మార్జిన్ని వర్తింపజేయడం
ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము mx-10 'యుటిలిటీ క్లాస్' తో టైల్విండ్లోని మూలకానికి నిలువు మార్జిన్ని జోడించడానికి, “ని ఉపయోగించండి నా-<విలువ> HTML ప్రోగ్రామ్లోని నిర్దిష్ట మూలకంతో యుటిలిటీ క్లాస్. ఈ తరగతి y-యాక్సిస్ (ఎగువ మరియు దిగువ వైపులా) వెంట మార్జిన్ను జోడిస్తుంది. వాక్యనిర్మాణం ఉదాహరణ: HTML మూలకానికి నిలువు మార్జిన్ని వర్తింపజేయడం ఈ ఉదాహరణలో, మేము 'ని ఉపయోగిస్తాము నా-10 'యుటిలిటీ క్లాస్' తో టైల్విండ్లో క్షితిజ సమాంతర మరియు నిలువు మార్జిన్ను జోడించడానికి, “ mx-
< శరీరం >
< div తరగతి = 'h-స్క్రీన్ mx-10 bg-purple-500' >
< p తరగతి = 'టెక్స్ట్-5xl టెక్స్ట్-సెంటర్' > మార్జిన్ లో టైల్విండ్ CSS p >
div >
శరీరం >
అవుట్పుట్
ఎగువ అవుట్పుట్ కంటైనర్ యొక్క ఎడమ మరియు కుడి వైపుల మార్జిన్ను చూపుతుంది. కంటైనర్ ఎలిమెంట్కు క్షితిజ సమాంతర మార్జిన్ విజయవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది. టైల్విండ్లో వర్టికల్ మార్జిన్ను ఎలా జోడించాలి?
ఇక్కడ, 'నా' అనేది 'y-యాక్సిస్' లేదా 'నిలువు అంచు'ని సూచిస్తుంది. “
< div తరగతి = 'h-96 my-10 bg-purple-500' >
< p తరగతి = 'టెక్స్ట్-5xl టెక్స్ట్-సెంటర్' > మార్జిన్ లో టైల్విండ్ CSS p >
div >
శరీరం >
అవుట్పుట్
ఎగువ అవుట్పుట్ కంటైనర్ ఎగువ మరియు దిగువ వైపుల మార్జిన్ను చూపుతుంది. కంటైనర్ ఎలిమెంట్కు నిలువు మార్జిన్ ప్రభావవంతంగా వర్తించబడిందని ఇది సూచిస్తుంది. ముగింపు