Rialaíonn box-sizing cad a thomhaiseann na hairíonna width agus height i ndáiríre. Thomhaiseann an réamhshocrú (content-box) an t-ábhar amháin; déanann iad a áireamh le stuaim agus imlíne.
Rialaíonn box-sizing cad a thomhaiseann na hairíonna width agus height i ndáiríre. Thomhaiseann an réamhshocrú (content-box) an t-ábhar amháin; déanann iad a áireamh le stuaim agus imlíne.
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! */
Le content-box, cuirtear stuaim agus imlíne ar bharr an width, agus dá bharr sin bíonn an eilimint níos leithne ná an uimhir a shocraigh tú. Briseann sé leaganacha amach: bíonn bosca width: 50% le stuaim ag foluain thar a 50%.
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
Le border-box, is é width an leithead deiridh a dhéantar — baintear stuaim agus imlíne ó taobh istigh. Is é an uimhir a shocraigh tú an méid a gheobhaidh tú, agus tá sin i bhfad níos intuigthe.
*, *::before, *::after {
box-sizing: border-box;
}
Cuireann beagnach gach stíleadlann nua-aimseartha, creatchló agus athchur seo i bhfeidhm go domhanda. Déanann sé tomhais inchurtha: width: 50% + stuaim fanann go díreach 50% ar leithead, suíonn dhá bhosca width: 50% taobh le taobh gan foluain, etc.
Baineann border-box an fhoinse is coitianta d'dhíobháil i ríomh-leagain — a bheith ag cur stuaim agus imlíne go meabhrach le gach leithead.
Tá a chur i bhfeidhm go domhanda is fearr-dhréachta a mheas, toisc go bhfuil "an leithead a shocraím an leithead a fhaighim" conas a bhraithíonn tú go nádúrtha go gcaithfidh tomhais oibriú.