டெயில்விண்ட் CSS இல், திணிப்பு குறிப்பிட்ட உறுப்பு உள்ளடக்கத்திற்கும் அதன் எல்லைக்கும் இடையே உள்ள இடைவெளி. கிடைமட்ட திணிப்பு உறுப்பின் இடது மற்றும் வலது பக்கத்தில் உள்ள இடைவெளி செங்குத்து திணிப்பு ஒரு தனிமத்தின் மேல் மற்றும் கீழ் உள்ள இடம். விரும்பிய உறுப்புகளுக்கு கிடைமட்ட அல்லது செங்குத்து திணிப்பைச் சேர்க்க டெயில்விண்ட் பல்வேறு பயன்பாட்டு வகுப்புகளை வழங்குகிறது.
இந்த கட்டுரை விளக்கும்:
டெயில்விண்டில் கிடைமட்ட திணிப்பை எவ்வாறு சேர்ப்பது?
டெயில்விண்டில் உள்ள ஒரு உறுப்பில் கிடைமட்ட திணிப்பைச் சேர்க்க, HTML நிரலில் விரும்பிய உறுப்புடன் “px-
தொடரியல்
< உறுப்பு வர்க்கம் = 'px-0 ...' > ... உறுப்பு >
இங்கே 'px' என்பது 'x-axis' அல்லது 'கிடைமட்ட திணிப்பு' என்பதைக் குறிக்கிறது.
எடுத்துக்காட்டு: ஒரு HTML உறுப்புக்கு கிடைமட்ட திணிப்பைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' px-20 'பயன்பாட்டு வகுப்பு' உடன் டெயில்விண்டில் உள்ள உறுப்புக்கு செங்குத்து திணிப்பைச் சேர்க்க, ' py- தொடரியல் எடுத்துக்காட்டு: HTML உறுப்புக்கு செங்குத்து திணிப்பைப் பயன்படுத்துதல் இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' பை-20 'பயன்பாட்டு வகுப்பு' உடன் டெயில்விண்டில் கிடைமட்ட மற்றும் செங்குத்து திணிப்பைச் சேர்க்க, ' px-<மதிப்பு> 'மற்றும்' py-
< உடல் >
< div வர்க்கம் = 'bg-pink-600 px-20 w-max' >
திணிப்பு உள்ளே டெயில்விண்ட் CSS
div >
உடல் >
வெளியீடு
மேலே உள்ள வெளியீடு கொள்கலனின் இடது மற்றும் வலது பக்கங்களில் திணிப்பைக் காட்டுகிறது. கொள்கலன் உறுப்புக்கு கிடைமட்ட திணிப்பு வெற்றிகரமாக பயன்படுத்தப்பட்டது என்பதை இது குறிக்கிறது. டெயில்விண்டில் செங்குத்து திணிப்பை எவ்வாறு சேர்ப்பது?
இங்கே 'py' என்பது 'y-axis' அல்லது 'vertical padding' ஐக் குறிக்கிறது.
< div வர்க்கம் = 'bg-pink-600 py-20 w-max' >
திணிப்பு உள்ளே டெயில்விண்ட் CSS
div >
உடல் >
வெளியீடு
மேலே உள்ள வெளியீடு, கொள்கலனின் மேல் மற்றும் கீழ் பக்கங்களில் திணிப்பைக் காட்டுகிறது. கொள்கலன் உறுப்புக்கு செங்குத்து திணிப்பு திறம்பட பயன்படுத்தப்பட்டது என்பதை இது குறிக்கிறது. முடிவுரை