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

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

திணிப்பு தொகுதி எல்லையில் இருந்து உள்ளடக்கத்தை பிரிக்கிறது, மற்றும் விளிம்பு தொகுதிகளுக்கு இடையில் இடைவெளிகளை உருவாக்குகிறது

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

ஒரு தனிமத்தின் ஒவ்வொரு பக்கத்திலும் CSS இல் விளிம்பு அல்லது திணிப்பை அமைக்க பின்வரும் பண்புகள் உள்ளன:

திணிப்பு:

• திணிப்பு மேல்: பொருள்;
• திணிப்பு-வலது: பொருள்;
• திணிப்பு-கீழே: பொருள்;
• திணிப்பு-இடது: பொருள்;

புலங்கள்:

• விளிம்பு மேல்: பொருள்;
• விளிம்பு வலது: பொருள்;
• விளிம்பு கீழே: பொருள்;
• விளிம்பு-இடது: பொருள்;

எந்த CSS அலகுகளிலும் மதிப்புகள் குறிப்பிடப்படலாம் - px, em, %, முதலியன. எடுத்துக்காட்டு: விளிம்பு-மேல்: 15px .

போன்ற மிகவும் வசதியான விஷயமும் உள்ளது விளிம்பு மற்றும் திணிப்பு CSS க்கான சுருக்கெழுத்து. ஒரு உறுப்பின் நான்கு பக்கங்களிலும் ஓரங்கள் அல்லது திணிப்புகளை அமைக்க வேண்டும் என்றால், ஒவ்வொரு பக்கத்திற்கும் தனித்தனியாக சொத்தை எழுத வேண்டியதில்லை. எல்லாம் எளிமையானது: விளிம்பு மற்றும் திணிப்புக்கு நீங்கள் ஒரே நேரத்தில் 1, 2, 3 அல்லது 4 மதிப்புகளைக் குறிப்பிடலாம். அமைப்புகள் எவ்வாறு விநியோகிக்கப்படுகின்றன என்பதை மதிப்புகளின் எண்ணிக்கை தீர்மானிக்கிறது:

• 4 மதிப்புகள்: பின்வரும் வரிசையில் உறுப்பின் அனைத்துப் பக்கங்களுக்கும் திணிப்பு அமைக்கப்பட்டுள்ளது: மேல், வலது, கீழ், இடது: திணிப்பு: 2px 4px 5px 10px;
• 3 மதிப்புகள்: திணிப்பு முதலில் மேல் பக்கமாகவும், பின்னர் ஒரே நேரத்தில் இடது மற்றும் வலதுபுறமாகவும், பின்னர் கீழே: திணிப்பு: 3px 6px 9px;
• 2 மதிப்புகள்: திணிப்பு முதலில் மேல் மற்றும் கீழ் பக்கங்களில் இருந்து ஒரே நேரத்தில் அமைக்கப்படுகிறது, பின்னர் இடது மற்றும் வலதுபுறத்தில் ஒரே நேரத்தில்: திணிப்பு: 6px 12px;
• 1 மதிப்பு: உறுப்பின் அனைத்துப் பக்கங்களுக்கும் சமமான திணிப்பு அமைக்கப்பட்டுள்ளது: திணிப்பு: 3px;

அதே விதிகள் CSS மார்ஜின் சொத்துக்கும் பொருந்தும். விளிம்பிற்கு எதிர்மறை மதிப்புகளையும் நீங்கள் பயன்படுத்தலாம் என்பதை நினைவில் கொள்க (எடுத்துக்காட்டாக, -3px), இது சில நேரங்களில் மிகவும் பயனுள்ளதாக இருக்கும்.

விளிம்பைச் சுருக்கவும்

நிலைமையை கற்பனை செய்து பாருங்கள்: இரண்டு தொகுதி கூறுகள் ஒன்றின் மேல் ஒன்றாக அமைந்துள்ளன மற்றும் அவை விளிம்பு புலங்கள் வழங்கப்படுகின்றன. மேல் தொகுதி ஓரமாக அமைக்கப்பட்டுள்ளது: 60px , மற்றும் கீழ் தொகுதி விளிம்பு: 30px . இரண்டு உறுப்புகளின் இரண்டு எல்லைப் புலங்கள் வெறுமனே தொடும், இதன் விளைவாக, தொகுதிகளுக்கு இடையிலான இடைவெளி 90 பிக்சல்களுக்கு சமமாக இருக்கும் என்று கருதுவது தர்க்கரீதியானதாக இருக்கும்.

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

தொகுதிகளுக்கு இடையிலான தூரம் பெரிய மதிப்புகளுக்கு சமம்

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

• இரண்டு விளிம்பு மதிப்புகளும் நேர்மறையாக இருக்கும்போது, ​​​​விளைவான விளிம்பு அளவு பெரிய மதிப்புக்கு சமமாக இருக்கும்.
• மதிப்புகளில் ஒன்று எதிர்மறையாக இருந்தால், புலத்தின் அளவைக் கணக்கிட நீங்கள் மதிப்புகளின் கூட்டுத்தொகையைப் பெற வேண்டும். எடுத்துக்காட்டாக, 20px மற்றும் -18px மதிப்புகளுடன் புலத்தின் அளவு இருக்கும்:
  20 + (-18) = 20 – 18 = 2 பிக்சல்கள்.
• இரண்டு மதிப்புகளும் எதிர்மறையாக இருந்தால், இந்த எண்களின் மாடுலிகள் ஒப்பிடப்பட்டு, பெரிய மாடுலஸ் கொண்ட எண் (எனவே, எதிர்மறை எண்களில் சிறியது) தேர்ந்தெடுக்கப்படும். எடுத்துக்காட்டு: நீங்கள் -6px மற்றும் -8px புலங்களின் மதிப்புகளை ஒப்பிட வேண்டும். ஒப்பிடப்படும் எண்களின் மாடுலி முறையே 6 மற்றும் 8 ஆகும். அது 6-8 என்று பின்வருமாறு. இதன் விளைவாக புலத்தின் அளவு -8 பிக்சல்கள்.
• மதிப்புகள் குறிப்பிடப்பட்டால் வெவ்வேறு அலகுகள் CSS, அவை ஒன்றாகக் குறைக்கப்படுகின்றன, அதன் பிறகு அவை ஒப்பிடப்பட்டு பெரிய மதிப்பு தேர்ந்தெடுக்கப்படுகிறது.
• குழந்தை உறுப்புகளுக்கான விளிம்பு அளவு இன்னும் சுவாரஸ்யமான முறையில் தீர்மானிக்கப்படுகிறது: ஒரு குழந்தைக்கு அதன் பெற்றோரை விட பெரிய விளிம்பு இருந்தால், அதற்கு முன்னுரிமை அளிக்கப்படுகிறது. இந்த வழக்கில், பெற்றோரின் மேல் மற்றும் கீழ் விளிம்புகளின் அளவுகள் குழந்தைக்கு குறிப்பிடப்பட்டதைப் போலவே இருக்கும். இந்த வழக்கில், பெற்றோருக்கும் குழந்தைக்கும் இடையே இடைவெளி இருக்காது.

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

கூறுகள் உள்ளமை அல்லது ஒருவருக்கொருவர் அடுத்ததாக அமைந்திருக்கும். பின்வரும் உதாரணத்தைப் பார்ப்போம்:

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

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

இந்த பாணிகளை அமைக்க பல வழிகள் உள்ளன. எடுத்துக்காட்டாக, சில அளவீட்டு அலகுகளில் (px, ex, em, pt, cm மற்றும் பல) ஒரு வாதத்துடன் அனைத்து விளிம்புகள் அல்லது உள்தள்ளல்களின் அளவை நேரடியாகக் குறிப்பிடவும்:

திணிப்பு: 3px; விளிம்பு: 3px;

இந்த வழக்கில், விளிம்புகள் மற்றும் உள்தள்ளல்கள் நான்கு பக்கங்களிலும் ஒரே மாதிரியாக இருக்கும். இடைவெளியால் பிரிக்கப்பட்ட இரண்டு வாதங்களைக் குறிப்பிடும்போது:

திணிப்பு: 3px 5px; விளிம்பு: 3px 5px;

முதலாவது மேல் மற்றும் கீழ் விளிம்புகள்/இன்டென்ட்களின் அளவை தீர்மானிக்கும், இரண்டாவது - இடது மற்றும் வலதுபுறத்தில். மூன்று வாதங்கள் கொடுக்கப்பட்டால்:

திணிப்பு: 3px 5px 2px; விளிம்பு: 3px 5px 2px;

முதலாவது மேலே உள்ள விளிம்பு/இன்டென்டேஷன், இரண்டாவது இடது மற்றும் வலது, மூன்றாவது கீழே உள்ளது. நான்கு வாதங்களுடன்:

திணிப்பு: 3px 5px 2px 6px; விளிம்பு: 3px 5px 2px 6px;

முதலாவது விளிம்பு/வெளி மேலே உள்ளது, இரண்டாவது வலதுபுறம் உள்ளது, மூன்றாவது கீழே உள்ளது, நான்காவது இடதுபுறம் உள்ளது. நினைவில் கொள்வது எளிது: முதல் ஒன்று மேலே இருந்து, பின்னர் கடிகார திசையில். கூடுதலாக, பொருத்தமான பாணிகளைப் பயன்படுத்தி, ஒரு குறிப்பிட்ட விளிம்பிற்கு தனித்தனியாக ஓரங்கள் மற்றும் திணிப்புகளை அமைக்கலாம்: திணிப்பு-மேல், திணிப்பு-வலது, திணிப்பு-கீழே, திணிப்பு-இடது, விளிம்பு மேல், விளிம்பு-வலது, விளிம்பு-கீழ், விளிம்பு-இடது. இந்த பாணிகளின் மதிப்பு ஒரு வாதமாக மட்டுமே இருக்க முடியும், இது கொடுக்கப்பட்ட பக்கத்திற்கான மார்ஜின்/பேடிங்கின் அளவைக் குறிப்பிடுகிறது.

படத்தில், சிவப்புத் தொகுதி அட்டவணைக் கலத்தின் உள்ளேயும் அதன் எல்லைகளுக்கு அருகிலும் உள்ளது, அதாவது கலத்திற்கு விளிம்புகள் இல்லை. பாணியைப் பயன்படுத்தி செல் ஓரங்களை அமைப்போம்:

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

இதன் விளைவாக, பக்கம் பின்வருவனவாக மாறும்:

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

விளிம்பு மேல்: 5px;

புலங்களில் உள்ளதைப் போல, உள்தள்ளலை அட்டவணையில் அமைக்கிறோம், அட்டவணைக் கலத்திற்கு அல்ல என்பதை நினைவில் கொள்க. இதோ முடிவு:

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

சோதனை பக்கத்தின் HTML குறியீடு:

<html > <தலை > <தலைப்பு >சோதனை</தலைப்பு> <மெட்டா http-equiv = "உள்ளடக்கம்-வகை" உள்ளடக்கம் = "text/html;charset=utf-8" > </தலை> <உடல் > <பாணி >அட்டவணை (அகலம்: 200px; உயரம்: 150px; எல்லை: 1px திட #555; எல்லை-சரிவு: சரிவு) td (செங்குத்து-சீரமைப்பு: மேல்; திணிப்பு: 0px) div (அகலம்: 100px; உயரம்: 100px; பின்னணி: சிவப்பு)</ பாணி> <அட்டவணை நடை = "பின்னணி: சுண்ணாம்பு" > <tr > <td பாணி = "பேடிங்: 5px" > <div பாணி = "விளிம்பு: 0px" ></div> </td> </tr> </அட்டவணை> <அட்டவணை நடை = "பின்னணி: வானம் நீலம்; விளிம்பு-மேல்: 5px"> <tr > <td ></td> </tr> </அட்டவணை> </உடல்> </html>திணிப்பு-மேல்

தொகுதியின் கட்டமைப்பை நீங்கள் ஏற்கனவே அறிந்திருப்பீர்கள் என்று நம்புகிறேன். இல்லையென்றால், அது கீழே கொடுக்கப்பட்டுள்ளது.

தொகுதி அமைப்பு

அதனால். ஒரு தொகுதியின் விளிம்புகள் மற்றும் ஓரங்கள் முறையே திணிப்பு மற்றும் விளிம்பு பண்புகளால் குறிப்பிடப்படுகின்றன என்பதை நீங்கள் ஏற்கனவே அறிந்திருக்கலாம். முந்தைய கட்டுரையில் நாங்கள் ஏற்கனவே இந்த தலைப்பில் ஓரளவு தொட்டுள்ளோம். இந்தப் பக்கத்தில், புலங்களை நாம் கூர்ந்து கவனிப்போம் ( திணிப்பு) மற்றும் திணிப்பு ( விளிம்பு ).

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

அதனால். விளிம்புகள் திணிப்பு பண்புகளால் குறிப்பிடப்படுகின்றன. இவை தொகுதி எல்லைகளிலிருந்து அதன் உள்ளடக்கங்களுக்கான உள் தூரங்கள்.

சொத்து அனைத்து உறுப்புகளுக்கும் பொருந்தும்.

தூரம் CSS நீள அலகுகளில் குறிப்பிடப்பட்டுள்ளது, %, அல்லது ( இயல்புநிலை

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

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

விளிம்பு சொத்து அனைத்து உறுப்புகளுக்கும் பொருந்தும்.

திணிப்பு CSS நீள அலகுகளில் குறிப்பிடப்பட்டுள்ளது, %, அல்லது ( இயல்புநிலை) உலாவியால் தானாகவே கண்டறியப்படும்.

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

மேலும் ஒரு விஷயம்: உள்தள்ளல்கள் ( விளிம்பு) தொகுதிக்கு வெளியே அமைந்துள்ளன, அதே சமயம் விளிம்புகள் ( திணிப்பு) அதன் உள்ளே, அதனால் தொகுதியின் பின்னணி அல்லது அது பின்னணி படம்விளிம்புகளுக்கு மட்டுமே பொருந்தும், மற்றும் உள்தள்ளல்கள் எப்போதும் வெளிப்படையானவை அல்லது முக்கிய ஒன்றின் பின்னணியைக் கொண்டிருக்கும் ( பெற்றோர்) தொகுதி அல்லது பக்க பின்னணி.

குறியீடு துணுக்கு: