Kutumia Box Model katika CSS- Muundo na Nafasi

Katika CSS, Box Model ni dhana muhimu ya kuamua jinsi kipengele kilivyoundwa na kuwekwa kwenye ukurasa wa tovuti. Inajumuisha vipengele vya msingi kama vile Maudhui, Padding, Border na Margin.

 

Content

Content ni eneo ambalo lina maudhui halisi ya kipengele, kama vile maandishi, picha au video.

Ili kufafanua ukubwa wa maudhui, tunatumia width  na height mali.

 

Padding

Padding ni nafasi inayozunguka yaliyomo, na kuunda pengo kati ya yaliyomo na ya kipengele border.

Ili kutaja padding maadili, tunatumia padding-top, padding-right,padding-bottom na  mali. padding-left

 

Border

Ni Border muhtasari unaozunguka kipengele, na kuunda mpaka wazi kati ya yaliyomo na eneo linalozunguka.

Ili kufomati border, tunatumia border-width, border-style, na border-color  sifa.

 

Margin

Margin ni nafasi iliyo nje ya kipengele border, na kuunda pengo kati ya vitu vingine.

Ili kufafanua margin maadili, tunatumia margin-top, margin-right, na sifa. margin-bottom margin-left

 

Kwa kutumia Box Model katika CSS, tunaweza kubinafsisha ukubwa na nafasi ya kipengele kwa kurekebisha thamani za vijenzi vyake.

Mfano:

.box {  
  width: 200px;  
  height: 100px;  
  padding: 20px;
  border: 1px solid black;
  margin: 10px;  
}  

Katika mfano ulio hapo juu, kipengele kilicho na darasa .box kina upana wa 200px na urefu wa 100px. Ina 20px padding, nyeusi border yenye unene wa 1px na 10px margin.

 

Kwa kurekebisha maadili haya, unaweza kuunda vipengele vilivyo na ukubwa tofauti na nafasi kwenye ukurasa wako wa tovuti. Kupitia matumizi ya Box Model, una udhibiti juu ya nafasi, saizi, na nafasi ya vipengee ndani ya kiolesura chako.