Ag baint úsáide as Box Model i CSS- Struchtúr agus Suíomh

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.