டெயில்விண்ட் CSS இல், ஏ விளிம்பு குறிப்பிட்ட உறுப்பைச் சுற்றியுள்ள இடைவெளியைக் கட்டுப்படுத்தப் பயன்படுகிறது. இது பயன்படுத்தப்பட்ட உறுப்புக்கும் அதன் சுற்றியுள்ள கூறுகளுக்கும் இடையில் இடத்தை சேர்க்கிறது. டெயில்விண்ட் CSS ஆனது விளிம்பு பயன்பாடுகள் மற்றும் விளிம்பு மதிப்புகளின் தொகுப்பை வழங்குகிறது, இது பயனர்கள் விரும்பிய உறுப்புகளைச் சுற்றி இடைவெளியைத் தனிப்பயனாக்க அனுமதிக்கிறது. மேலும், பயனர்கள் ஒரு குறிப்பிட்ட உறுப்பின் மேல், கீழ், இடது அல்லது வலதுபுறம் போன்ற ஒரு பக்கத்திற்கு ஓரத்தைச் சேர்க்கலாம்.
இந்த வலைப்பதிவு டெயில்விண்ட் CSS இல் உள்ள ஒரு உறுப்பின் ஒரு பக்கத்திற்கு ஓரம் சேர்க்கும் உதாரணங்களை விளக்கும்.
டெயில்விண்டில் ஒரு பக்கத்திற்கு விளிம்பை எவ்வாறு சேர்ப்பது?
டெயில்விண்டில் உள்ள ஒரு உறுப்பின் ஒற்றைப் பக்கத்தில் ஓரத்தைச் சேர்க்க, பின்வரும் பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தலாம்:
அதை நன்றாகப் புரிந்துகொள்ள, கீழே கொடுக்கப்பட்டுள்ள உதாரணங்களைப் பார்க்கவும்.
எடுத்துக்காட்டு 1: ஒரு தனிமத்தின் மேல் விளிம்பைச் சேர்க்கவும்
இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' mt-14 'பயன்பாட்டு வகுப்பு' வெளியீடு எடுத்துக்காட்டு 2: ஒரு தனிமத்தின் அடிப்பகுதியில் விளிம்பைச் சேர்க்கவும் இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' mb-14 'வகுப்பில்' எடுத்துக்காட்டு 3: ஒரு தனிமத்தின் இடதுபுறத்தில் விளிம்பைச் சேர்க்கவும் இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' மிலி-14 'வகுப்பில்' எடுத்துக்காட்டு 4: ஒரு தனிமத்தின் வலதுபுறத்தில் விளிம்பைச் சேர்க்கவும் இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' mr-14 'வகுப்பில்' டெயில்விண்டில் உள்ள ஒரு உறுப்பின் ஒற்றைப் பக்கத்திற்கு ஓரத்தைச் சேர்க்க, பல்வேறு பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தலாம். ml-<மதிப்பு> ”,” திரு-<மதிப்பு> ”,” mt-
< div வர்க்கம் = 'h-96 mt-14 bg-purple-500' >
< ப வர்க்கம் = 'உரை-5xl உரை-மையம்' > விளிம்பு உள்ளே டெயில்விண்ட் CSS ப >
div >
உடல் >
இங்கே:
மேலே உள்ள வெளியீடு, கொள்கலனின் மேற்புறத்தில் விளிம்பு சேர்க்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது.
< div வர்க்கம் = 'h-96 mb-14 bg-purple-500' >
< ப வர்க்கம் = 'உரை-5xl உரை-மையம்' > விளிம்பு உள்ளே டெயில்விண்ட் CSS ப >
div >
உடல் >
வெளியீடு 
கொள்கலனின் அடிப்பகுதியில் விளிம்பு சேர்க்கப்பட்டுள்ளதைக் காணலாம்.
< div வர்க்கம் = 'h-96 ml-14 bg-purple-500' >
< ப வர்க்கம் = 'உரை-5xl உரை-மையம்' > விளிம்பு உள்ளே டெயில்விண்ட் CSS ப >
div >
உடல் >
வெளியீடு 
மேலே உள்ள வெளியீடு, கொள்கலன் உறுப்புக்கு இடதுபுறத்தில் விளிம்பு சேர்க்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது.
< div வர்க்கம் = 'h-96 mr-14 bg-purple-500' >
< ப வர்க்கம் = 'உரை-5xl உரை-மையம்' > விளிம்பு உள்ளே டெயில்விண்ட் CSS ப >
div >
உடல் >
வெளியீடு 
நீங்கள் பார்க்க முடியும் என, கொள்கலனின் வலதுபுறத்தில் விளிம்பு திறமையாக சேர்க்கப்பட்டுள்ளது. முடிவுரை