டெயில்விண்டில் கிடைமட்ட மற்றும் செங்குத்து திணிப்பை எவ்வாறு சேர்ப்பது?

Teyilvintil Kitaimatta Marrum Cenkuttu Tinippai Evvaru Cerppatu



டெயில்விண்ட் CSS இல், திணிப்பு குறிப்பிட்ட உறுப்பு உள்ளடக்கத்திற்கும் அதன் எல்லைக்கும் இடையே உள்ள இடைவெளி. கிடைமட்ட திணிப்பு உறுப்பின் இடது மற்றும் வலது பக்கத்தில் உள்ள இடைவெளி செங்குத்து திணிப்பு ஒரு தனிமத்தின் மேல் மற்றும் கீழ் உள்ள இடம். விரும்பிய உறுப்புகளுக்கு கிடைமட்ட அல்லது செங்குத்து திணிப்பைச் சேர்க்க டெயில்விண்ட் பல்வேறு பயன்பாட்டு வகுப்புகளை வழங்குகிறது.

இந்த கட்டுரை விளக்கும்:







டெயில்விண்டில் கிடைமட்ட திணிப்பை எவ்வாறு சேர்ப்பது?

டெயில்விண்டில் உள்ள ஒரு உறுப்பில் கிடைமட்ட திணிப்பைச் சேர்க்க, HTML நிரலில் விரும்பிய உறுப்புடன் “px-” வகுப்பு பயன்படுத்தப்படுகிறது. பயனர்கள் திணிப்பின் அளவிற்கு வெவ்வேறு மதிப்புகளைக் குறிப்பிடலாம். இந்த வகுப்பு x- அச்சில் அதாவது உறுப்புகளின் இடது மற்றும் வலது பக்கங்களில் திணிப்பைச் சேர்க்கிறது.



தொடரியல்



< உறுப்பு வர்க்கம் = 'px-0 ...' > ... உறுப்பு >


இங்கே 'px' என்பது 'x-axis' அல்லது 'கிடைமட்ட திணிப்பு' என்பதைக் குறிக்கிறது.





எடுத்துக்காட்டு: ஒரு HTML உறுப்புக்கு கிடைமட்ட திணிப்பைப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' px-20 'பயன்பாட்டு வகுப்பு' உடன்

கிடைமட்ட திணிப்பைச் சேர்க்கும் உறுப்பு:



< உடல் >

< div வர்க்கம் = 'bg-pink-600 px-20 w-max' >
திணிப்பு உள்ளே டெயில்விண்ட் CSS
div >

உடல் >


வெளியீடு


மேலே உள்ள வெளியீடு கொள்கலனின் இடது மற்றும் வலது பக்கங்களில் திணிப்பைக் காட்டுகிறது. கொள்கலன் உறுப்புக்கு கிடைமட்ட திணிப்பு வெற்றிகரமாக பயன்படுத்தப்பட்டது என்பதை இது குறிக்கிறது.

டெயில்விண்டில் செங்குத்து திணிப்பை எவ்வாறு சேர்ப்பது?

டெயில்விண்டில் உள்ள உறுப்புக்கு செங்குத்து திணிப்பைச் சேர்க்க, ' py- HTML நிரலில் குறிப்பிட்ட உறுப்புடன் பயன்பாட்டு வகுப்பு. இந்த வகுப்பு y-அச்சின் வழியாக திணிப்பைச் சேர்க்கிறது, அதாவது உறுப்பின் மேல் மற்றும் கீழ் இரு பக்கங்களிலும்.

தொடரியல்

< உறுப்பு வர்க்கம் = 'பை-0 ...' > ... உறுப்பு >


இங்கே 'py' என்பது 'y-axis' அல்லது 'vertical padding' ஐக் குறிக்கிறது.

எடுத்துக்காட்டு: HTML உறுப்புக்கு செங்குத்து திணிப்பைப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' பை-20 'பயன்பாட்டு வகுப்பு' உடன்

'உறுப்பு செங்குத்து திணிப்பு அதில் சேர்க்க:

< உடல் >

< div வர்க்கம் = 'bg-pink-600 py-20 w-max' >
திணிப்பு உள்ளே டெயில்விண்ட் CSS
div >

உடல் >


வெளியீடு


மேலே உள்ள வெளியீடு, கொள்கலனின் மேல் மற்றும் கீழ் பக்கங்களில் திணிப்பைக் காட்டுகிறது. கொள்கலன் உறுப்புக்கு செங்குத்து திணிப்பு திறம்பட பயன்படுத்தப்பட்டது என்பதை இது குறிக்கிறது.

முடிவுரை

டெயில்விண்டில் கிடைமட்ட மற்றும் செங்குத்து திணிப்பைச் சேர்க்க, ' px-<மதிப்பு> 'மற்றும்' py- ” பயன்பாட்டு வகுப்புகள் முறையே HTML நிரலில் தேவையான கூறுகளுடன் பயன்படுத்தப்படுகின்றன. ஒரு உறுப்பின் இடது மற்றும் வலது அல்லது மேல் மற்றும் கீழ் திணிப்பைப் பயன்படுத்த பயனர்கள் வெவ்வேறு மதிப்புகளைக் குறிப்பிடலாம். டெயில்விண்டில் கிடைமட்ட மற்றும் செங்குத்து திணிப்பைப் பயன்படுத்துவதற்கான முழுமையான முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.