A CSS-ben ez Box Model egy fontos fogalom annak meghatározásában, hogy az elemek hogyan épülnek fel és hogyan helyezkednek el a weboldalon. Olyan alapvető összetevőkből áll, mint a Tartalom, Padding, Border és Margin.
Content
Content az a terület, amely az elem tényleges tartalmát tartalmazza, például szöveget, képeket vagy videókat.
width A tartalom méretének meghatározásához a és tulajdonságokat használjuk height.
Padding
Padding a tartalom körüli tér, ami rést hoz létre a tartalom és az elem között border.
Az értékek megadásához a és tulajdonságokat padding használjuk. padding-top, padding-right,padding-bottom padding-left
Border
Ez Border az elem körüli körvonal, amely egyértelmű határvonalat hoz létre a tartalom és a környező terület között.
A formázásához a, , és tulajdonságokat border használjuk . border-width border-style border-color
Margin
Margin az elemen kívüli tér border, ami rést hoz létre a többi elem között.
Az értékek meghatározásához a, , és tulajdonságokat margin használjuk. margin-top margin-right margin-bottom margin-left
A CSS-ben lévő funkció használatával Box Model testreszabhatjuk egy elem méretét és pozícióját az összetevői értékeinek módosításával.
Példa:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
A fenti példában az osztályt tartalmazó elem .box szélessége 200 képpont, magassága pedig 100 képpont. Van egy 20 képpontos padding, egy fekete border 1 képpont vastagságú és egy 10 képpontos margin.
Ezen értékek módosításával különböző méretű és térközű elemeket hozhat létre a weboldalon. A használatával Box Model szabályozhatja a felületen belüli elemek elhelyezését, méretét és térközét.