In CSS, Box Model is coincheap tábhachtach é seo chun a chinneadh conas a dhéantar eilimint a struchtúrú agus a shuíomh ar leathanach gréasáin. Tá comhpháirteanna bunúsacha ann amhail Ábhar, Padding, Border agus Margin.
Content
Content
an limistéar ina bhfuil ábhar iarbhír na heiliminte, amhail téacs, íomhánna nó físeáin.
Chun méid an ábhair a shainiú, bainimid úsáid as an width
agus height
airíonna.
Padding
Padding
an spás timpeall an ábhair, rud a chruthaíonn bearna idir an t-ábhar agus an eilimint border.
Chun padding luachanna a shonrú, úsáidimid an padding-top,
padding-right,
padding-bottom
agus airíonna. padding-left
Border
Is Border
é an t-imlíne timpeall an eilimint, rud a chruthaíonn teorainn shoiléir idir an t-ábhar agus an ceantar máguaird.
Chun formáid an border, úsáidimid an border-width
, border-style
, agus border-color
airíonna.
Margin
Margin Is é an spás lasmuigh den eilimint border, ag cruthú bearna idir eilimintí eile.
Chun margin luachanna a shainiú, úsáidimid an margin-top
, margin-right
, agus airíonna. margin-bottom
margin-left
Trí úsáid a bhaint Box Model as an CSS, is féidir linn méid agus suíomh eilimint a shaincheapadh trí luachanna a chomhpháirteanna a mhodhnú.
Sampla:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Sa sampla thuas, .box
tá leithead 200px agus airde 100px ag an eilimint leis an rang. Tá 20px aige padding, dubh border le tiús 1px, agus 10px margin.
Trí na luachanna seo a choigeartú, is féidir leat gnéithe de mhéideanna agus spásanna éagsúla a chruthú ar do leathanach gréasáin. Trí úsáid a bhaint as an Box Model, tá smacht agat ar shuíomh, ar mhéid agus ar spásáil na n-eilimintí laistigh de do chomhéadan.