box-sizing inadhibiti kile width na height mali yanafanya kwa kweli. Chaguo-msingi (content-box) hupima tu maudhui; border-box hufanya zisomeke padding na mpaka.
box-sizing inadhibiti kile width na height mali yanafanya kwa kweli. Chaguo-msingi (content-box) hupima tu maudhui; border-box hufanya zisomeke padding na mpaka.
.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! */
Kwa content-box, padding na mpaka huongezwa juu ya width, kwa hivyo kipengele hukoma kuwa kikubwa zaidi kuliko namba ulichoweka. Hii inaimaliza maegesho: sanduku lenye width: 50% lenye padding litakamatia 50% yake.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Kwa border-box, width ni mwisho wa upana uliochorwa — padding na mpaka hutolewa kutoka ndani. Namba ulichoweka ni saizi unayoipata, ambayo ni zaidi ya intuitive.
*, *::before, *::after {
box-sizing: border-box;
}
Hamwi kila zina mtindo, muundo, na seti ya usuli inatumika kwa ulimwengu. Inafanya ukubwa wa kuzamiana kuwa sawishi: width: 50% + padding inabaki kabisa 50% pana, masanduku mawili ya width: 50% yanakaa upande wa upande bila kumwaga, nk.
border-box inakuondoa chanzo kimoja tu cha matatizo ya hesabu ya maegesho — haja ya kuongeza kiakili padding na mpaka kwa kila upana.
Kuiweka duniani kunachukuliwa kama pratikisa bora ya chaguo-msingi, kwa sababu "upana unioandika ni upana unipata" ni jinsi unavyotaka asilia u ukubwa kufanya kazi.