Jassif Team Institution

CSS Padding

இந்த உறுப்புக்கு 70px padding உள்ளது.

div {
  padding: 70px;
}

CSS Padding

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

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

Padding - தனிப்பட்ட பக்கங்கள்

CSS ஒரு உறுப்பின் ஒவ்வொரு பக்கத்திற்கும் padding குறிப்பிட பண்புகளைக் கொண்டுள்ளது:

• padding-top - ஒரு உறுப்பின் மேல் padding அமைக்கிறது
• padding-right - ஒரு உறுப்பின் வலது padding அமைக்கிறது
• padding-bottom - ஒரு உறுப்பின் கீழ் padding அமைக்கிறது
• padding-left - ஒரு உறுப்பின் இடது padding அமைக்கிறது

அனைத்து padding பண்புகளும் பின்வரும் மதிப்புகளைக் கொண்டிருக்கலாம்:

• length - px, pt, cm போன்றவற்றில் padding குறிப்பிடுகிறது
• % - கொண்டிருக்கும் உறுப்பின் அகலத்தின் % இல் padding குறிப்பிடுகிறது
• inherit - padding பெற்றோர் உறுப்பிலிருந்து பெறப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது

எடுத்துக்காட்டு

<div> உறுப்பின் நான்கு பக்கங்களுக்கும் வெவ்வேறு padding அமைக்கவும்:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - சுருக்க பண்பு

குறியீட்டைச் சுருக்குவதற்கு, அனைத்து padding பண்புகளையும் ஒரு அறிவிப்பில் குறிப்பிட முடியும்.

padding பண்பு பின்வரும் தனிப்பட்ட padding பண்புகளுக்கான சுருக்க பண்பாகும்:

• padding-top
• padding-right
• padding-bottom
• padding-left

நான்கு மதிப்புகள் இருந்தால்:

padding: 25px 50px 75px 100px;

• மேல் padding 25px
• வலது padding 50px
• கீழ் padding 75px
• இடது padding 100px

எடுத்துக்காட்டு

நான்கு மதிப்புகளுடன் padding சுருக்க பண்பைப் பயன்படுத்தவும்:

div {
  padding: 25px 50px 75px 100px;
}

மூன்று மதிப்புகள் இருந்தால்:

padding: 25px 50px 75px;

• மேல் padding 25px
• வலது மற்றும் இடது padding 50px
• கீழ் padding 75px

எடுத்துக்காட்டு

மூன்று மதிப்புகளுடன் padding சுருக்க பண்பைப் பயன்படுத்தவும்:

div {
  padding: 25px 50px 75px;
}

இரண்டு மதிப்புகள் இருந்தால்:

padding: 25px 50px;

• மேல் மற்றும் கீழ் padding 25px
• வலது மற்றும் இடது padding 50px

எடுத்துக்காட்டு

இரண்டு மதிப்புகளுடன் padding சுருக்க பண்பைப் பயன்படுத்தவும்:

div {
  padding: 25px 50px;
}

ஒரு மதிப்பு இருந்தால்:

padding: 25px;

• நான்கு paddingகளும் 25px

எடுத்துக்காட்டு

ஒரு மதிப்புடன் padding சுருக்க பண்பைப் பயன்படுத்தவும்:

div {
  padding: 25px;
}

Padding மற்றும் உறுப்பு அகலம்

CSS width பண்பு உறுப்பின் உள்ளடக்க பகுதியின் அகலத்தைக் குறிப்பிடுகிறது. உள்ளடக்க பகுதி என்பது ஒரு உறுப்பின் padding, எல்லை மற்றும் விளிம்பின் உள்ளே உள்ள பகுதியாகும் (பெட்டி மாடல்).

எனவே, ஒரு உறுப்புக்கு குறிப்பிட்ட அகலம் இருந்தால், அந்த உறுப்பில் சேர்க்கப்படும் padding உறுப்பின் மொத்த அகலத்தில் சேர்க்கப்படும். இது பெரும்பாலும் விரும்பத்தகாத முடிவாகும்.

எடுத்துக்காட்டு

இங்கே, <div> உறுப்புக்கு 300px அகலம் வழங்கப்படுகிறது. இருப்பினும், <div> உறுப்பின் உண்மையான அகலம் 350px (300px + 25px இடது padding + 25px வலது padding) ஆக இருக்கும்:

div {
  width: 300px;
  padding: 25px;
}

Padding மற்றும் box-sizing

box-sizing பண்பு ஒரு உறுப்பின் அகலம் மற்றும் உயரம் எவ்வாறு கணக்கிடப்படுகின்றன என்பதை வரையறுக்கிறது: அவை padding மற்றும் எல்லைகளைச் சேர்க்க வேண்டுமா அல்லது இல்லையா.

box-sizing பண்பு பின்வரும் மதிப்புகளைக் கொண்டிருக்கலாம்:

• content-box - இது இயல்புநிலையாகும். அகலம் மற்றும் உயரம் பண்புகள் உள்ளடக்கத்தை மட்டுமே உள்ளடக்குகின்றன (எல்லை மற்றும் padding சேர்க்கப்படவில்லை)
• border-box - அகலம் மற்றும் உயரம் பண்புகள் உள்ளடக்கம், padding மற்றும் எல்லையை உள்ளடக்குகின்றன

எனவே, padding அளவு எதுவாக இருந்தாலும் அகலத்தை 300px இல் வைத்திருக்க, நீங்கள் box-sizing: border-box; பயன்படுத்தலாம். இது உறுப்பு அதன் உண்மையான அகலத்தை பராமரிக்க வைக்கிறது; நீங்கள் padding அதிகரித்தால், கிடைக்கும் உள்ளடக்க இடம் குறையும்.

எடுத்துக்காட்டு

padding அளவு எதுவாக இருந்தாலும் அகலத்தை 300px இல் வைத்திருக்க box-sizing பண்பைப் பயன்படுத்தவும்:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

பயிற்சி

div {
  padding:    ;
}

அனைத்து CSS Padding பண்புகள்