CSS பேட்டிங்கின் சுருக்கமான கண்ணோட்டம்

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

CSS பேட்டிங் சொத்து

சுருக்கெழுத்து CSS திணிப்பு சொத்து பயன்படுத்த, நீங்கள் நினைவூட்டல் பயன்படுத்த முடியும் "TRouBLe" (அல்லது "TRiBbLe" நீங்கள் ஸ்டார் ட்ரெக் ரசிகர்கள்). இது மேல் , வலது , கீழ் மற்றும் இடதுபுறம் உள்ளது , இது சுருக்கெழுத்துச் சொத்தில் நீங்கள் அமைக்கப்பட்டுள்ள திணிப்பு அகலங்களின் வரிசையை குறிக்கிறது. உதாரணத்திற்கு:

திணிப்பு: மேல் வலது கீழ் இடது; திணிப்பு: 1px 2px 3px 6px;

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

திணிப்பு: 12px;

CSS இன் வரிடன், திணிப்பின் 12 பிக்சல்கள் உறுப்புகளின் அனைத்து பக்கங்களுக்கும் பொருந்தும்.

மேல் மற்றும் கீழ் மற்றும் இடது மற்றும் வலது ஆகியவற்றிற்கான திணிப்பு தேவைப்பட்டால், நீங்கள் இரண்டு மதிப்புகள் எழுதலாம்:

திணிப்பு: 24px 48px;

முதல் மதிப்பு (24px) மேல் மற்றும் கீழ் பொருந்தும், இரண்டாவது இடது மற்றும் வலது பொருந்தும் போது.

நீங்கள் மூன்று மதிப்புகள் எழுதினால், மேல் மற்றும் கீழ் மாறும் போது அதே கிடைமட்ட திணிப்பு (இடது மற்றும் வலது) செய்யும்:

திணிப்பு: மேல் வலது மற்றும் இடது கீழ்; திணிப்பு: 0px 1px 3px;

CSS பெட்டி மாதிரி படி, திணிப்பு உறுப்பு / உள்ளடக்கம் தன்னை நெருக்கமாக உள்ளது. இதன் பொருள் உள்ளடக்கத்தை அகலம் அல்லது உயரம் மற்றும் எந்த எல்லை மதிப்புகள் ஆகியவற்றிற்கும் இடையே உள்ள உறுப்புக்கு திணிப்பு சேர்க்கப்படுகிறது. திணிப்பு பூஜ்ஜியமாக அமைக்கப்பட்டால், அது உள்ளடக்கத்தின் அதே விளிம்பில் உள்ளது.

CSS பேஷிங் மதிப்புகள்

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

#container {width: 800px; உயரம்: 200px; } #container p {width: 400px; உயரம்: 75%; திணிப்பு: 25% 0; }

#container உறுப்பு உள்ளே உள்ள பத்தி உயரம் #container உயரம் 75% மற்றும் மேல் திணிப்பு அகலம் 25% மற்றும் கீழே padding அகலம் 25% இருக்கும். இது 300 + 200 + 200 = 700px ஆகும்.

CSS பேடிங் சேர்க்கும் விளைவுகள்

தொகுதி அளவிலான கூறுகளில் , திணிப்பு நான்கு பக்கங்களிலும் பயன்படுத்தப்படுகிறது. உறுப்பு ஏற்கனவே ஒரு தொகுதி அல்லது பெட்டி என்பதால், திணிப்பு பெட்டி பக்கங்களுக்கு பயன்படுத்தப்படுகிறது.

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

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