CSS (Cascading Style Sheets) waa luqadda loo isticmaalo in lagu habeeyo quruxda iyo qaabka bogagga internet-ka. Mid ka mid ah fikradaha muhiimka ah ee CSS waa Box Model-ka. Box Model wuxuu qeexayaa sida walxaha (elements) bogga HTML u muuqdaan, u taagnaanayaan, una dhaqmaan. Waxaa ka kooban afar qaybood oo muhiim ah: margin
, border
, padding
, iyo content
. Casharkan, waxaan si gaar ah uga hadli doonaa saddexda qaybood ee ugu muhiimsan: margins
, borders
, iyo padding
.
CSS - Box Model: Margins, Borders, Padding |
1. Margins (Geesta Dibadda)
Margin
waa booska bannaanka ah ee ku xeeran xudduudda walaxda (element). Waxay abuurtaa meel bannaan oo u dhaxaysa walaxda iyo wax kasta oo ku wareegsan (sida walxaha kale ama xuduudaha bogga). Margin
waxay leedahay afar jiho: midig, bidix, sare, iyo hoose. Waxaa lagu hagaajin karaa hal qiime si ay u wada saameyso dhammaan afarta jiho ama si kala gaar gaar ah jihooyinka.
Tusaale:
css
div {
margin: 10px; /* dhammaan jihooyinka */
margin-top: 15px; /* sare */
margin-bottom: 20px; /* hoose */
margin-left: 5px; /* bidix */
margin-right: 5px; /* midig */
}
2. Borders (Xudduudda)
Border
waa khadka ku wareegsan walaxda (element) iyo padding
-keeda. Waxay ku daraysaa muuqaal ah daah ama xariiq oo ku xeeran walaxda, waxayna noqon kartaa midka khafiif ah ama ka balaaran. Border
-ka waxaa lagu hagaajin karaa midabka (color
), ballaadhka (width
), iyo qaabka (style
).
Tusaale:
css
div {
border: 2px solid black; /* ballaadh: 2px, qaab: solid, midab: madow */
border-radius: 5px; /* wareegsan geesaha xudduudda */
}
3. Padding (Geesta Gudaha)
Padding
waa booska gudaha ee u dhaxaysa walaxda (element) iyo content
-ka ku jira. Waxa uu bixiyaa meel bannaan oo ku dhex jirta walaxda si macluumaadka ku jira uu ugu muuqdo si wanaagsan oo kala fogaansho leh. Sida margin
, padding
waxaa lagu hagaajin karaa jihooyinka afarta ah (top, bottom, left, right).
Tusaale:
css
div {
padding: 10px; /* dhammaan jihooyinka */
padding-top: 15px; /* sare */
padding-bottom: 20px; /* hoose */
padding-left: 5px; /* bidix */
padding-right: 5px; /* midig */
}
Gunaanad:
Box Model-ka ee CSS waa qaab muhim u ah fahamka sida walxaha loogu dhejiyo bogagga HTML. Margins
waxay abuuraan booska dibadda ah, Borders
waxay qeexaan xudduudda walxaha, halka Padding
ay bixiso booska gudaha. Fahamka iyo adeegsiga saxda ah ee qaybahaas ayaa kaa caawin kara inaad abuurto bogag qurux badan oo si xirfad leh loo habeeyey.
Hadda, samee tijaabooyin adiga oo ku dabaqaya margins
, borders
, iyo padding