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

Tail Vind Lo Ksitijasamantara Mariyu Niluvu Marjin Nu Ela Jodincali



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

ఈ వ్యాసం ఉదాహరణగా ఉంటుంది:







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

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



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



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


ఇక్కడ, 'mx' అనేది 'x-axis' లేదా 'క్షితిజ సమాంతర మార్జిన్'ని సూచిస్తుంది. “”ని “5”, “14” మొదలైన ఏదైనా చెల్లుబాటు అయ్యే విలువతో భర్తీ చేయాలని నిర్ధారించుకోండి.





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

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

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



< శరీరం >

< div తరగతి = 'h-స్క్రీన్ mx-10 bg-purple-500' >

< p తరగతి = 'టెక్స్ట్-5xl టెక్స్ట్-సెంటర్' > మార్జిన్ లో టైల్‌విండ్ CSS p >

div >

శరీరం >


అవుట్‌పుట్


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

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

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

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

< మూలకం తరగతి = 'నా-<విలువ>...' > ... మూలకం >


ఇక్కడ, 'నా' అనేది 'y-యాక్సిస్' లేదా 'నిలువు అంచు'ని సూచిస్తుంది. “”ని “6”, “12” మొదలైన ఏదైనా చెల్లుబాటు అయ్యే విలువతో భర్తీ చేయాలని నిర్ధారించుకోండి.

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

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

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

< శరీరం >

< div తరగతి = 'h-96 my-10 bg-purple-500' >

< p తరగతి = 'టెక్స్ట్-5xl టెక్స్ట్-సెంటర్' > మార్జిన్ లో టైల్‌విండ్ CSS p >

div >

శరీరం >


అవుట్‌పుట్


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

ముగింపు

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