box-sizing jikkonttrolla x'inhu eżatt li jitkejlu mill-proprjetajiet width u height. Il-valur default (content-box) itkejjel biss il-kontenut; border-box jagħmilha jinkludu l-padding u l-border.
box-sizing jikkonttrolla x'inhu eżatt li jitkejlu mill-proprjetajiet width u height. Il-valur default (content-box) itkejjel biss il-kontenut; border-box jagħmilha jinkludu l-padding u l-border.
.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! */
B'content-box, il-padding u l-border huma miżjuda fuq il-width, allura l-element jintemm akbar mill-numru li inti issettajt. Din taqsam il-layout: kaxxa width: 50% b'padding toħroġ minn 50% tagħha.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
B'border-box, width huwa l-finali wisa' rranderata — il-padding u l-border jiħtieġu miż-ġewwa. In-numru li inti issettajt huwa d-daqs li inti tikseb, li huwa ħafna aktar intwitiv.
*, *::before, *::after {
box-sizing: border-box;
}
Iqrieб kull stylesheet modern, framework, u reset japplikaw dan globalment. Dan jagħmel it-twettiq tal-ħamsa preveduta: width: 50% + padding ibqa' eżatt 50% wiesgħa, zewġ kassis width: 50% jissiedzux ġenb b'ġenb mingħajr tkissir, eċċ.
border-box jieħu l-aktar sors komuni ta' ras-duħħa tal-layout-math — għadhom biex mentalment iżżid padding u border għal kull wisa'.
Is-setting globalment huwa meqjus default ta' prattika tajba, għax "il-wisa' li nisset huwa l-wisa' li nikseb" huwa kif inti naturalment tistenna li x-xogħol tal-ħamsa jaħdem.