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

Teyilvintil Oru Pakkattirku Tinippai Evvaru Cerppatu



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

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







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

டெயில்விண்டில் உள்ள ஒரு தனிமத்தின் ஒரு பக்கத்திற்கு திணிப்பைச் சேர்க்க, பின்வரும் பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தலாம்:



அதை நன்கு புரிந்து கொள்ள, கீழே கொடுக்கப்பட்டுள்ள உதாரணங்களைப் பார்க்கவும்.



எடுத்துக்காட்டு 1: ஒரு தனிமத்தின் மேல் திணிப்பைச் சேர்க்கவும்





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

” உறுப்பு அதன் மேல் 10 அலகுகள் திணிப்பு சேர்க்க:

< உடல் >

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

உடல் >


வெளியீடு




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

எடுத்துக்காட்டு 2: ஒரு தனிமத்தின் அடிப்பகுதியில் திணிப்பைச் சேர்க்கவும்

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

'உறுப்பு அதன் கீழே 10 அலகுகள் திணிப்பு சேர்க்க:

< உடல் >

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

உடல் >


வெளியீடு


கொள்கலனின் அடிப்பகுதியில் திணிப்பு சேர்க்கப்பட்டுள்ளதைக் காணலாம்.

எடுத்துக்காட்டு 3: ஒரு தனிமத்தின் வலதுபுறத்தில் திணிப்பைச் சேர்க்கவும்

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

” உறுப்பு அதன் வலதுபுறத்தில் 10 யூனிட் பேடிங்கைச் சேர்க்க வேண்டும்:

< உடல் >

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

உடல் >


வெளியீடு


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

எடுத்துக்காட்டு 4: ஒரு தனிமத்தின் இடதுபுறத்தில் திணிப்பைச் சேர்க்கவும்

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

” உறுப்பு அதன் இடதுபுறத்தில் 10 யூனிட் பேடிங்கைச் சேர்க்க வேண்டும்:

< உடல் >

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

உடல் >


வெளியீடு


கொள்கலனின் இடதுபுறத்தில் திணிப்பு சேர்க்கப்பட்டுள்ளதைக் காணலாம்.

முடிவுரை

டெயில்விண்டில் உள்ள ஒரு தனிமத்தின் ஒரு பக்கத்திற்கு திணிப்பைச் சேர்க்க, பல்வேறு பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தலாம், அதாவது ' pl-<மதிப்பு> ”,” pr-<மதிப்பு> ”,” pt-<மதிப்பு> ', மற்றும் ' pb-<மதிப்பு> ”. இந்த வகுப்புகள் குறிப்பிட்ட உறுப்பின் இடது, வலது, மேல் மற்றும் கீழ் பக்கங்களுக்கு முறையே திணிப்பைச் சேர்க்கின்றன. பயனர்கள் திணிப்பின் அளவிற்கு வெவ்வேறு மதிப்புகளைக் குறிப்பிடலாம். இந்த வலைப்பதிவு டெயில்விண்ட் CSS இல் உள்ள ஒரு உறுப்பின் ஒரு பக்கத்தில் திணிப்பைச் சேர்ப்பதற்கான எடுத்துக்காட்டுகளை விளக்கியுள்ளது.