டெயில்விண்ட் CSS வழங்குகிறது ' விளிம்பு 'உறுப்புகளைச் சுற்றியுள்ள இடைவெளியைக் கட்டுப்படுத்த பயனர்களுக்கு உதவும் பயன்பாட்டு வகுப்புகள். தி கிடைமட்ட விளிம்பு ஒரு தனிமத்தின் இடது மற்றும் வலது பக்கத்தில் இடத்தை சேர்க்கிறது, அதேசமயம் a செங்குத்து விளிம்பு ஒரு உறுப்பின் மேல் மற்றும் கீழ் இடத்தை சேர்க்கிறது. விரும்பிய உறுப்புகளுக்கு கிடைமட்ட அல்லது செங்குத்து விளிம்புகளைச் சேர்க்க டெயில்விண்ட் பல்வேறு பயன்பாட்டு வகுப்புகளை வழங்குகிறது.
இந்த கட்டுரை எடுத்துக்காட்டும்:
டெயில்விண்டில் கிடைமட்ட விளிம்பை எவ்வாறு சேர்ப்பது?
டெயில்விண்டில் உள்ள உறுப்புக்கு கிடைமட்ட விளிம்பைச் சேர்க்க, ' mx-<மதிப்பு> HTML நிரலில் விரும்பிய உறுப்புடன் வகுப்பு பயன்படுத்தப்படுகிறது. பயனர்கள் விளிம்பின் அளவிற்கு வெவ்வேறு மதிப்புகளைக் குறிப்பிடலாம். இந்த வகுப்பு x- அச்சில் (வலது மற்றும் இடது பக்கங்கள்) விளிம்பைச் சேர்க்கிறது.
தொடரியல்
< உறுப்பு வர்க்கம் = 'mx-
இங்கே, 'mx' என்பது 'x-அச்சு' அல்லது 'கிடைமட்ட விளிம்பு' என்பதைக் குறிக்கிறது. “
எடுத்துக்காட்டு: HTML உறுப்புக்கு கிடைமட்ட விளிம்பைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' mx-10 'பயன்பாட்டு வகுப்பு' உடன் டெயில்விண்டில் உள்ள உறுப்புக்கு செங்குத்து விளிம்பைச் சேர்க்க, ' என்-<மதிப்பு> HTML நிரலில் குறிப்பிட்ட உறுப்புடன் பயன்பாட்டு வகுப்பு. இந்த வகுப்பு y- அச்சில் (மேல் மற்றும் கீழ் பக்கங்கள்) விளிம்பைச் சேர்க்கிறது. தொடரியல் எடுத்துக்காட்டு: HTML உறுப்புக்கு செங்குத்து விளிம்பைப் பயன்படுத்துதல் இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' என்-10 'பயன்பாட்டு வகுப்பு' உடன் டெயில்விண்டில் கிடைமட்ட மற்றும் செங்குத்து விளிம்பைச் சேர்க்க, ' mx-<மதிப்பு> 'மற்றும்' என்-<மதிப்பு> ” பயன்பாட்டு வகுப்புகள் முறையே HTML நிரலில் தேவையான கூறுகளுடன் பயன்படுத்தப்படுகின்றன. ஒரு உறுப்பின் இடது மற்றும் வலது அல்லது மேல் மற்றும் கீழ் விளிம்புகளைப் பயன்படுத்த பயனர்கள் வெவ்வேறு மதிப்புகளைக் குறிப்பிடலாம். இந்த எழுதுதல் டெயில்விண்டில் கிடைமட்ட மற்றும் செங்குத்து விளிம்புகளைப் பயன்படுத்தும் முறையை எடுத்துக்காட்டுகிறது.
< உடல் >
< div வர்க்கம் = 'h-screen mx-10 bg-purple-500' >
< ப வர்க்கம் = 'உரை-5xl உரை-மையம்' > விளிம்பு உள்ளே டெயில்விண்ட் CSS ப >
div >
உடல் >
வெளியீடு 
மேலே உள்ள வெளியீடு கொள்கலனின் இடது மற்றும் வலது பக்கங்களின் விளிம்பைக் காட்டுகிறது. கொள்கலன் உறுப்புக்கு கிடைமட்ட விளிம்பு வெற்றிகரமாகப் பயன்படுத்தப்பட்டதை இது குறிக்கிறது. டெயில்விண்டில் செங்குத்து விளிம்பை எவ்வாறு சேர்ப்பது?
இங்கே, 'my' என்பது 'y-axis' அல்லது 'செங்குத்து விளிம்பு' என்பதைக் குறிக்கிறது. “
< div வர்க்கம் = 'h-96 my-10 bg-purple-500' >
< ப வர்க்கம் = 'உரை-5xl உரை-மையம்' > விளிம்பு உள்ளே டெயில்விண்ட் CSS ப >
div >
உடல் >
வெளியீடு 
மேலே உள்ள வெளியீடு கொள்கலனின் மேல் மற்றும் கீழ் பக்கங்களுக்கான விளிம்பைக் காட்டுகிறது. கொள்கலன் உறுப்புக்கு செங்குத்து விளிம்பு திறம்பட பயன்படுத்தப்பட்டுள்ளது என்பதை இது குறிக்கிறது. முடிவுரை