Waa Maxay Sanduuqa Moodalka (Box Model)?

Sanduuqa moodalka CSS waa aasaaska qaabaynta mareegaha. Waxay u aragtaa walax kasta oo HTML ah sida sanduuq. Fahamka moodalkani wuxuu muhiim u yahay xakamaynta qaabka iyo naqshadeynta walxaha.

Qaybaha Sanduuqa Moodalka

• Content (Gudaha): Waa qeybta uu ku jiro qoraalkaaga, sawiradaada, ama waxyaabaha kale ee ku jira walaxda.
• Padding (Xadka Gudaha): Waa meesha u dhaxaysa content-ka iyo xadka (border). Waxaad isticmaali kartaa si aad u abuurto meel bannaan oo ka soo horjeeda content-ka iyo xadka.
• Border (Xadka): Waa xariiqda ku wareegsan padding-ka iyo content-ka. Waxaad dejin kartaa midabkeeda, ballaceeda, iyo qaabkeeda.
• Margin (Xadka Dibadda): Waa meesha u dhaxaysa xadka iyo walxaha kale ee ku xeeran. Waxaad isticmaali kartaa si aad u abuurto meel bannaan oo u dhaxaysa walxaha.

Tusaale

Aan aragno tusaale sida loo dejiyo cabbirada sanduuqa moodalka:

.sanduuq {
 width: 300px; /* Ballaca content-ka */
 height: 150px; /* Dhererka content-ka */
 padding: 20px; /* Meel bannaan oo ku wareegsan content-ka */
 border: 5px solid black; /* Xariiq madow oo 5px ballac ah */
 margin: 30px; /* Meel bannaan oo ku wareegsan xadka */
}

Sharaxaada

• width iyo height waxay dejinayaan cabbirada content-ka.
• padding waxay ku daraysaa meel bannaan oo ku wareegsan content-ka, iyadoo aan la beddelin cabbirka walaxda.
• border waxay abuurtaa xariiq ku wareegsan padding-ka iyo content-ka.
• margin waxay ku daraysaa meel bannaan oo ka baxsan xadka, iyadoo kala fogeysiinaysa walaxda iyo walxaha kale.

Muhiimadda Sanduuqa Moodalka

Fahamka sanduuqa moodalka wuxuu kaa caawinayaa inaad si sax ah u xakamayso cabbirada, meelaynta, iyo naqshadeynta walxaha mareegahaaga. Waxay muhiim u tahay abuurista naqshad mareeg ah oo isku dheelitiran oo soo jiidasho leh.