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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

எனது வலைப்பதிவிற்கு வரவேற்கிறோம். Css (Cascading Style Sheets) பல தனிப்பயனாக்குதல் விருப்பங்களை வழங்குகிறது தோற்றம்இணைய பக்கங்கள். எந்த உறுப்புக்கும் மேலே அல்லது வேறு எந்தப் பக்கத்திலும் உள்ள திணிப்பை CSS இல் எப்படி வரையறுப்பது என்பதை இன்று நான் சுருக்கமாகக் காட்ட விரும்புகிறேன்.

விளிம்பு

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

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

P,div(
விளிம்பு மேல்: 20px;
}

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

ஒவ்வொரு பக்கத்திலும் ஒரு விளிம்பு சொத்தை மட்டுமே பயன்படுத்தி விளிம்புகளை எழுத முடியும், அதில் 4 மதிப்புகள் ஒரு வரிசையில் எழுதப்பட்டுள்ளன:

பிரிவு(
விளிம்பு: 20px 10px 20px 10px;
}

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

பிரிவு(
விளிம்பு: 20px 10px;
}

முதல் மதிப்பு மேல் மற்றும் கீழ் விளிம்பு, மற்றும் இரண்டாவது பக்கங்களில் விளிம்பு.

உள்தள்ளல்

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

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

மேலும், விளிம்பைப் போலவே, நீங்கள் பக்கத்தின் பெயரைச் சேர்த்து, அதற்கான தூரத்தை மட்டும் அமைக்கலாம். எடுத்துக்காட்டாக, மேல் திணிப்பை padding-top ஐப் பயன்படுத்தி எழுதலாம். பொதுவாக, திணிப்பு சொத்து விளிம்பு சொத்து போலவே செயல்படுகிறது.

எடுத்துக்காட்டாக, இந்த குறியீட்டை நீங்கள் கொடுக்கலாம்:

தடுப்பு(
அகலம்: 200px;
திணிப்பு: 20px;
}

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

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

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

CSS திணிப்பு விருப்பங்கள்

அடுக்கு நடை தாள்களின் உதவியுடன், இரண்டு வகையான உள்தள்ளல்களை அமைக்க முடியும்.

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

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

தெளிவுக்காக, படம்:

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

திணிப்பைப் பயன்படுத்தி CSS இல் திணிப்பு (மேல், கீழ், இடது, வலது)

திணிப்பு-இடது, திணிப்பு-மேல், திணிப்பு-வலது மற்றும் திணிப்பு-கீழ் பாணி பண்புகள், வலைப்பக்க உறுப்புகளின் இடது, மேல், வலது மற்றும் கீழ் முறையே திணிப்பு மதிப்புகளை அமைக்க உங்களை அனுமதிக்கின்றன:

திணிப்பு-மேல் | திணிப்பு-வலது | திணிப்பு-கீழே | padding-left: மதிப்பு | வட்டி | பரம்பரை

உள்தள்ளலின் அளவை பிக்சல்கள் (px), சதவீதம் (%) அல்லது CSS க்கு ஏற்றுக்கொள்ளக்கூடிய பிற அலகுகளில் குறிப்பிடலாம். சதவீதங்களைக் குறிப்பிடும்போது, ​​உறுப்புகளின் அகலத்திலிருந்து மதிப்பு கணக்கிடப்படுகிறது. பரம்பரை மதிப்பு அது பெற்றோரிடமிருந்து பெறப்பட்டது என்பதைக் குறிக்கிறது.

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

p.test(
திணிப்பு-இடது:20px;
திணிப்பு-மேல்: 5px;
திணிப்பு-வலது:35px;
padding-bottom:10px
}

கூட்டு திணிப்பு விதிவலைப்பக்க உறுப்பின் அனைத்துப் பக்கங்களிலும் ஒரே நேரத்தில் உள்தள்ளல்களைக் குறிப்பிட உங்களை அனுமதிக்கிறது:

திணிப்பு:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

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

எனவே, மேலே உள்ள CSS விதியை முடிந்தவரை சுருக்கி பின்வருமாறு எழுதலாம்:

p.test( திணிப்பு:5px 35px 10px 20px)

CSS இல் விளிம்பு சொத்து அல்லது விளிம்புகள்

விளிம்பு-இடது, விளிம்பு-மேல், விளிம்பு-வலது மற்றும் விளிம்பு-கீழ் பாணி பண்புக்கூறுகள் முறையே, இடது, மேல், வலது மற்றும் கீழ் விளிம்பு மதிப்புகளை அமைக்க உங்களை அனுமதிக்கின்றன:

விளிம்பு-மேல் | விளிம்பு-வலது | விளிம்பு-கீழே | விளிம்பு-இடது:<значение>|தானாக|பரம்பரை

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

உள்தள்ளலின் அளவை பிக்சல்கள் (px), சதவீதம் (%) அல்லது CSSக்கு அனுமதிக்கப்பட்ட பிற அலகுகளில் குறிப்பிடலாம்:

ப(
விளிம்பு-இடது: 20px;
}
h1(
விளிம்பு-வலது:15%;
}

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

வெளிப்புற உள்தள்ளல்களின் மதிப்புகளாகப் பயன்படுத்த அனுமதிக்கப்படுகிறது எதிர்மறை மதிப்புகள்:

ப(
விளிம்பு-இடது:-20px;
}

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

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

விளிம்பு:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

பார்டர் சொத்தை பயன்படுத்தி பார்டர் விருப்பங்கள்

பிரேம்களை அமைக்கும் போது, ​​மூன்று வகையான அளவுருக்கள் உள்ளன:

• எல்லை-அகலம் - எல்லை தடிமன்;
• எல்லை-நிறம் - எல்லை நிறம்;
• எல்லை-பாணி - சட்டகம் வரையப்படும் கோட்டின் வகை.

சட்ட தடிமன் அளவுருவுடன் ஆரம்பிக்கலாம்:

எல்லை அகலம்: [மதிப்பு | மெல்லிய | நடுத்தர | தடித்த] (1,4) | பரம்பரை

சட்ட தடிமன்பிக்சல்கள் அல்லது CSS இல் கிடைக்கும் பிற அலகுகளில் குறிப்பிடலாம். மெல்லிய, நடுத்தர மற்றும் தடிமனான மாறிகள் பார்டர் தடிமனை முறையே 2, 4 மற்றும் 6 பிக்சல்களாக அமைக்கின்றன:

எல்லை-அகலம்:நடுத்தரம்;

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

எல்லை அகலம்: 5px 3px 5px 3px

தற்போதைய பத்திக்கு, விதியைப் பயன்படுத்தி மேல் பார்டரின் தடிமன் 1px, வலது 2px, கீழே 3px மற்றும் இடது 4px ஐப் பயன்படுத்தவும் (எல்லை-அகலம்: 1px 2px 3px 4px;)

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

எல்லை-இடது-அகலம்|எல்லை-மேல்-அகலம்|எல்லை-வலது-அகலம்|எல்லை-கீழ்-அகலம்: மெல்லிய|நடுத்தர|தடித்த|<толщина>|பரம்பரை

அடுத்த அளவுரு நீங்கள் கட்டுப்படுத்தக்கூடிய எல்லை-வண்ணமாகும் சட்ட நிறம்:

எல்லை-நிறம்: [நிறம் | வெளிப்படையான] (1,4) | பரம்பரை

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

p (பார்டர்-அகலம்: 2px; பார்டர்-நிறம்: சிவப்பு)

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

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

எல்லை-இடது-நிறம்|எல்லை-மேல்-வண்ணம்|எல்லை-வலது-வண்ணம்|எல்லை-கீழே-நிறம்: வெளிப்படையான|<цвет>|பரம்பரை

மற்றும் கடைசி அளவுருஎல்லை-பாணி குறிப்பிடுகிறது சட்ட வகை:

எல்லை-பாணி: (1,4) | பரம்பரை

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

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

எல்லை-இடது-பாணி|எல்லை-மேல்-பாணி|எல்லை-வலது-பாணி|எல்லை-கீழ்-பாணி: எதுவும்

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

எல்லை: | பரம்பரை

மதிப்புகள் எந்த வரிசையிலும் இருக்கலாம், இடைவெளிகளால் பிரிக்கப்படுகின்றன:

td (எல்லை: 1px திட மஞ்சள்)

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

எஞ்சியிருப்பது சுருக்கமாக:

• பணிக்காக திணிப்புநாங்கள் சொத்தை பயன்படுத்துகிறோம் திணிப்பு;
• கட்டமைக்க ஓரங்கள்ஒரு விதி உள்ளது விளிம்பு;
• சட்ட அளவுருக்கள்பண்புக்கூறைப் பயன்படுத்தி குறிப்பிடப்படுகின்றன எல்லை.

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

அவ்வளவுதான், அடுத்த முறை சந்திப்போம்!

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

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

நீங்கள் உங்கள் தளத்தை உருவாக்குகிறீர்கள் எனில், உங்கள் பிரதான நடை கோப்பின் மேலே பின்வரும் பண்புகளைச் செருகுமாறு பரிந்துரைக்கிறேன்:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:முன், *:பின் ( -webkit-box-sizing: border- பெட்டி; -moz-box-sizing: box-sizing: border-box )

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

உங்களிடம் இது போன்ற தளவமைப்பு உறுப்பு இருப்பதாக வைத்துக்கொள்வோம்:

மேலே விவரிக்கப்பட்ட பண்புகளைப் பயன்படுத்தாமல் (மேல் உறுப்பு) மற்றும் அவற்றின் பயன்பாட்டுடன் (கீழ் உறுப்பு) விருப்பம் இப்படித்தான் இருக்கும்:

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

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

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

CSS "பேடிங்" சொத்தை பயன்படுத்தி திணிப்பு

விஷயங்களின் முழு தர்க்கத்தையும் நீங்கள் புரிந்து கொள்ள, தளவமைப்பின் பின்வரும் பகுதியை உதாரணமாக எடுத்துக் கொள்வோம்:

உங்கள் சொந்த பாணியுடன்:

Test_div (அகலம்: 250px; பார்டர்: 1px திடம்; )

காட்சி பதிப்பு இதுபோல் தெரிகிறது:

என்ன சொத்து" திணிப்பு"? இது குறிப்பிட்ட உறுப்புகளில் உள் உள்தள்ளலை ஒழுங்கமைக்க உதவுகிறது. எங்கள் தளவமைப்பில் 10px இன் உள் திணிப்பைச் சேர்ப்போம்:

Test_div (அகலம்: 250px; பார்டர்: 1px திட; திணிப்பு: 10px; // பேடிங் 10px )

பார்வைக்கு இது போல் தெரிகிறது:

சொத்தில் உள்ள எண் 10 என்பது, குறிப்பிட்ட உறுப்புகளுக்குள், அவற்றின் நான்கு பக்கங்களிலும், 10px விளிம்பைச் சேர்க்க வேண்டும். பிக்சல்கள் (px) சதவீதங்கள் அல்லது பிற CSS ஆதரவு மதிப்புகளுடன் மாற்றப்படலாம்.

இரண்டு விருப்பங்கள் உள்ளனஉள்தள்ளல்கள் செய்யப்பட வேண்டிய பக்கங்களின் அறிகுறிகள்.

முதலில்- இது கட்சிகளின் வெளிப்படையான குறிப்புடன்:

திணிப்பு-மேல்: 10px; // 10px மேல் திணிப்பு-வலது: 10px; // 10px திணிப்பு வலது திணிப்பு-கீழே: 10px; // உள் திணிப்பு 10px கீழே திணிப்பு-இடது இருந்து: 10px; // 10px இடது திணிப்பு

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

திணிப்பு: 10px 0 0 0; // உள் திணிப்பு மேலே 10px, மற்ற அனைத்தும் - 0px திணிப்பு: 10px 0; // உள் திணிப்பு மேல் மற்றும் கீழ் 10px, மற்றும் பக்கங்களிலும் - 0px திணிப்பு: 0 10px; // உள் திணிப்பு 0px மேல் மற்றும் கீழ், மற்றும் பக்கங்களிலும் 10px

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

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

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

CSS சொத்து "விளிம்பு" பயன்படுத்தி விளிம்பு

சொத்தின் தனித்துவமான அம்சம் " விளிம்பு"உறுப்புக்கு வெளியே உள்தள்ளல் சேர்க்கப்படுகிறது, அதாவது வெளிப்புறம்.

இங்கே சேர்ப்பதற்கு இரண்டு விருப்பங்களும் உள்ளன.

முதலில்- கட்சியின் வெளிப்படையான அறிகுறியுடன்:

விளிம்பு மேல்: 10px; // 10px விளிம்பு மேல் விளிம்பு-வலது: 10px; // வலது ஓரம்-கீழே 10px விளிம்பு: 10px; // வெளிப்புற விளிம்பு 10px கீழ் ஓரம்-இடதுபுறம்: 10px; // 10px இடது ஓரம்

இரண்டாவது- மதிப்புகளின் பட்டியலுடன், ஒவ்வொன்றும் அதன் பக்கத்திற்கு ஒத்திருக்கும்:

விளிம்பு: 10px 0 0 0; // வெளிப்புற விளிம்பு 10px மேலே, மற்ற அனைத்தும் - 0px விளிம்பு: 10px 0; // விளிம்பு 10px மேல் மற்றும் கீழ், மற்றும் பக்கங்களிலும் - 0px விளிம்பு: 0 10px; // வெளிப்புற திணிப்பு 0px மேல் மற்றும் கீழ், மற்றும் பக்கங்களிலும் 10px

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

பின்வரும் மதிப்புடன் விளிம்பைப் பயன்படுத்துகிறோம்:

Test_div (அகலம்: 250px; கரை: 1px திடம்; விளிம்பு: 10px; // விளிம்பு 10px )

பார்வைக்கு இது போல் இருக்கும்:

எடுத்துக்காட்டில் இருந்து பார்க்க முடியும், இந்த வழக்கில், குறிப்பிட்ட கூறுகளை பிரிக்க வெளிப்புற விளிம்பு சேர்க்கப்படுகிறது.

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

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

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

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

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

அடிப்படை நிலைப்படுத்தல் விதிகள்

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

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

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

• விளிம்பு: 10px;
• திணிப்பு: 10px20px;
• திணிப்பு: 10px20px30px40px.

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

இந்த எல்லா நிகழ்வுகளிலும், உள்தள்ளல் மேல் CSS 10 px.

உறுப்புகளின் நிலையை மாற்றும் விதிகள்

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

நாம் வரையறுத்தால் scCurrInfo உறுப்பில் மேல் CSS இல் திணிப்பு, இலக்கு அடையப்படும், ஆனால் li மட்டத்தில் அது அடையாது.

இந்த எடுத்துக்காட்டில், திணிப்பு விதியைப் பயன்படுத்தி: 40px; 80px அகலம் மற்றும் உயர விதிகளை போதுமான அளவு குறைக்க வேண்டும். IN இல்லையெனில் scCurrInfo தொகுதியின் அளவு வெளிப்புறத் தொகுதியின் எல்லைகளை மீறும்.

scCurrInfo விளக்கத்திலிருந்து திணிப்பு விதியை அகற்றி, பட்டியல் உருப்படியின் நடை விளக்கத்தில் 20px மதிப்புடன் சேர்த்தால், நமக்கு மட்டுமே கிடைக்கும் மேல் உள்தள்ளல். CSS இந்த மதிப்பை மற்ற தரப்பினருக்குப் பயன்படுத்தாது.

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

பொது உள்ளடக்க வடிவமைப்பு நடைமுறைகள்

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

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

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

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

முழுமையான நிலைப்படுத்தல்

POSITION விதியுடன் தடு: முழுமையான ; அது அமைந்துள்ள தொகுதியுடன் தொடர்புடைய அதன் ஒருங்கிணைப்புகளால் நிர்ணயிக்கப்பட்ட இடத்தில் அமைந்திருக்கும்.

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

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

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