CSS இல், Box Model ஒரு உறுப்பு எவ்வாறு கட்டமைக்கப்படுகிறது மற்றும் வலைப்பக்கத்தில் நிலைநிறுத்தப்படுகிறது என்பதைத் தீர்மானிப்பதற்கான ஒரு முக்கியமான கருத்தாகும். Padding இது உள்ளடக்கம்,, Border மற்றும் போன்ற அடிப்படைக் கூறுகளைக் கொண்டுள்ளது Margin.
Content
Content உரை, படங்கள் அல்லது வீடியோக்கள் போன்ற உறுப்பின் உண்மையான உள்ளடக்கத்தைக் கொண்டிருக்கும் பகுதி.
உள்ளடக்கத்தின் அளவை வரையறுக்க, நாங்கள் width மற்றும் height பண்புகளைப் பயன்படுத்துகிறோம்.
Padding
Padding உள்ளடக்கத்தைச் சுற்றியுள்ள இடைவெளி, உள்ளடக்கத்திற்கும் உறுப்புக்கும் இடையில் இடைவெளியை உருவாக்குகிறது border.
மதிப்புகளைக் குறிப்பிட, நாங்கள் மற்றும் பண்புகளைப் padding பயன்படுத்துகிறோம் . padding-top, padding-right,padding-bottom padding-left
Border
இது Border உறுப்பைச் சுற்றியுள்ள அவுட்லைன், உள்ளடக்கத்திற்கும் சுற்றியுள்ள பகுதிக்கும் இடையே தெளிவான எல்லையை உருவாக்குகிறது.
வடிவமைக்க, மற்றும் பண்புகளைப் border பயன்படுத்துகிறோம் . border-width border-style border-color
Margin
Margin உறுப்புக்கு வெளியே உள்ள இடைவெளி border, மற்ற உறுப்புகளுக்கு இடையே ஒரு இடைவெளியை உருவாக்குகிறது.
மதிப்புகளை வரையறுக்க, மற்றும் பண்புகளைப் margin பயன்படுத்துகிறோம். margin-top margin-right margin-bottom margin-left
இன் CSS ஐப் பயன்படுத்துவதன் மூலம் Box Model, அதன் கூறுகளின் மதிப்புகளை மாற்றியமைப்பதன் மூலம் ஒரு தனிமத்தின் அளவு மற்றும் நிலையை நாம் தனிப்பயனாக்கலாம்.
உதாரணமாக:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
மேலே உள்ள எடுத்துக்காட்டில், வகுப்பைக் கொண்ட உறுப்பு .box 200px அகலமும் 100px உயரமும் கொண்டது. இது 20px, 1px தடிமன் கொண்ட padding கருப்பு மற்றும் 10px. border margin
இந்த மதிப்புகளைச் சரிசெய்வதன் மூலம், உங்கள் வலைப்பக்கத்தில் வெவ்வேறு அளவுகள் மற்றும் இடைவெளியுடன் உறுப்புகளை உருவாக்கலாம். ஐப் பயன்படுத்துவதன் மூலம் Box Model, உங்கள் இடைமுகத்தில் உள்ள உறுப்புகளின் நிலைப்படுத்தல், அளவு மற்றும் இடைவெளி ஆகியவற்றை நீங்கள் கட்டுப்படுத்தலாம்.