A cikin CSS, Box Model mahimmancin ra'ayi ne don ƙayyade yadda aka tsara wani abu da kuma sanya shi akan shafin yanar gizon. Ya ƙunshi abubuwa masu mahimmanci kamar Abun ciki, Padding, Border da Margin.
Content
Content shine yankin da ke ƙunshe da ainihin abin da ke cikin sigar, kamar rubutu, hotuna, ko bidiyoyi.
Don ayyana girman abun ciki, muna amfani da width kaddarorin height.
Padding
Padding sararin samaniya ne da ke kewaye da abun ciki, yana haifar da tazara tsakanin abun ciki da abubuwan border.
Don tantance padding ƙima, muna amfani da padding-top, padding-right,padding-bottom kaddarorin . padding-left
Border
The Border shi ne jigon da ke kewaye da kashi, yana samar da tsayayyen iyaka tsakanin abun ciki da yankin da ke kewaye.
Don tsara border, muna amfani da border-width, border-style, da border-color kaddarorin.
Margin
Margin sararin samaniya ne a wajen sinadari border, yana haifar da tazara tsakanin sauran abubuwa.
Don ayyana margin ƙima, muna amfani da margin-top, margin-right, da kaddarorin. margin-bottom margin-left
Ta amfani da Box Model CSS, za mu iya keɓance girman da matsayi na wani abu ta hanyar gyaggyarawa ƙimar abubuwan da ke cikin sa.
Misali:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
A cikin misalin da ke sama, ɓangaren da ke da ajin .box yana da faɗin 200px da tsayin 100px. Yana da 20px padding, baƙar fata border mai kauri na 1px, da 10px margin.
Ta hanyar daidaita waɗannan dabi'u, zaku iya ƙirƙirar abubuwa masu girma dabam da tazara a shafin yanar gizonku. Ta hanyar amfani da Box Model, kuna da iko akan sanyawa, girma, da tazarar abubuwa a cikin mahallin ku.