box-sizing width மற்றும் height பண்புகள் உண்மையில் என்ன அளவிடுகின்றன என்பதைக் கட்டுப்படுத்துகிறது. இயல்பான (content-box) வெறும் உள்ளடக்கத்தை மட்டுமே அளவிடுகிறது; அவற்றைப் padding மற்றும் சীர்மை சேர்க்க செய்கிறது.
box-sizing width மற்றும் height பண்புகள் உண்மையில் என்ன அளவிடுகின்றன என்பதைக் கட்டுப்படுத்துகிறது. இயல்பான (content-box) வெறும் உள்ளடக்கத்தை மட்டுமே அளவிடுகிறது; அவற்றைப் padding மற்றும் சীர்மை சேர்க்க செய்கிறது.
border-box.box {
box-sizing: content-box; /* the default */
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px ← bigger than you asked for! */
content-box உடன், padding மற்றும் சீர்மை width இல் மேலே சேர்க்கப்படுகிறது, எனவே உறுப்பு நீங்கள் அமைத்த எண்ணை விட பெரியதாக முடிகிறது. இது பிளவுவை உடைக்கிறது: padding கொண்ட width: 50% பெட்டி அதன் 50% ஐ மீறிவிடுகிறது.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box உடன், width என்பது இறுதி வரைந்த அகலம் — padding மற்றும் சீர்மை உள்ளுணர்வுக்குள் இருந்து கழிக்கப்படுகிறது. நீங்கள் அமைத்த எண் என்பது நீங்கள் பெறும் அளவு, இது மிகவும் உள்ளுணர்வாக உள்ளது.
*, *::before, *::after {
box-sizing: border-box;
}
கிட்டத்தட்ட ஒவ்வொரு நவீன நிலையுறை, கட்டமைப்பு மற்றும் மறுநிர்ணயம் இதை உலகளாவியாக பயன்படுத்துகிறது. இது அளவீட்டை கணிக்கக்கூடியதாக செய்கிறது: width: 50% + padding சரியாக 50% அகலமாக இருக்கிறது, இரண்டு width: 50% பெட்டிகள் மீறிவிடாமல் பக்கத்தில் இருக்கின்றன, முதலியன.
border-box கட்டமைப்பு-கணிதத் தலைவலி இல் ஒரே பொதுவான மூலம் அகற்றுகிறது — ஒவ்வொரு width க்கும் padding மற்றும் சீர்மை மানসிகமாக சேர்க்க வேண்டிய தேவை.
இதை உலகளாவியாக அமைப்பது சிறந்த-நடைமுறை இயல்பான பொருளாக கருதப்படுகிறது, ஏனெனில் "நான் அமைத்த அகலம் நான் பெற்ற அகலம்" என்பது உள்ளுணர்வாக அளவீட்டு செயல்பாடு எப்படி செயல்பட வேண்டும் என்பதைக் கணிக்கிறீர்கள்.