Në CSS, Box Model është një koncept i rëndësishëm për të përcaktuar se si një element është i strukturuar dhe pozicionuar në një faqe interneti. Ai përbëhet nga komponentë themelorë si Përmbajtja, Padding, Border dhe Margin.
Content
Content është zona që përmban përmbajtjen aktuale të elementit, si teksti, imazhet ose videot.
Për të përcaktuar madhësinë e përmbajtjes, ne përdorim veçoritë width dhe height.
Padding
Padding është hapësira rreth përmbajtjes, duke krijuar një hendek midis përmbajtjes dhe elementit border.
Për të specifikuar padding vlerat, ne përdorim veçoritë padding-top, padding-right,padding-bottom dhe . padding-left
Border
Është Border skica rreth elementit, duke krijuar një kufi të qartë midis përmbajtjes dhe zonës përreth.
Për të formatuar border, ne përdorim veçoritë border-width, border-style dhe border-color .
Margin
Margin është hapësira jashtë elementit border, duke krijuar një hendek midis elementeve të tjerë.
Për të përcaktuar margin vlerat, ne përdorim veçoritë margin-top, dhe. margin-right margin-bottom margin-left
Duke përdorur Box Model në CSS, ne mund të personalizojmë madhësinë dhe pozicionin e një elementi duke modifikuar vlerat e përbërësve të tij.
Shembull:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Në shembullin e mësipërm, elementi me klasën .box ka një gjerësi prej 200 px dhe një lartësi prej 100 px. Ka një 20px padding, një të zezë border me trashësi 1px dhe një 10px margin.
Duke rregulluar këto vlera, mund të krijoni elementë me madhësi dhe hapësira të ndryshme në faqen tuaj të internetit. Nëpërmjet përdorimit të Box Model, ju keni kontroll mbi pozicionimin, madhësinë dhe ndarjen e elementeve brenda ndërfaqes tuaj.