CSS A doboz modell

Elérkeztünk a CSS egyik legfontosabb részéhet. A mai napon megismerkedünk a doboz modellel.

A doboz modell lényege, hogy minden elemet értelmezhetünk egy dobozként. Mit is jelent ez? A következő kép jól illusztrálja a lényeget:

forrás: w3schools.com

Tehát egy elem  a következőkből áll:

• margó (margin) - meghatároz egy területet a kereten kívül. Nincsen háttérszíne, mindig átlátszó.
• keret (border) - az elem kerete a tartalom és az eltartás körül.
• eltartás (padding) - meghatároz egy területet a keret és a tartalom között (jól jöhet pl. táblázatoknál)
• tartalom (content) - az elem tartalma.

FONTOS megemlíteni, hogy az elem szélessége miből áll. Nézzük meg ezt a kódot:

elem{

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

}

Azt hihetnénk, hogy a kód egy 250pixel széles dobozt eredményez, de nem így van. Ugye megadjuk a tartalom szélességét 250px-re. Azonban a tartalom körül van minden oldalon 10-10px eltartás. A keret is minden oldalon 5-5px és a margó is (10-10px). Akkor ha jól számoltam, akkor az eredmény 300px lesz. Tehát az elem szélessége (és/vagy magassága) a width, padding, border és margin összege. 

Nézzünk meg még egy példát:

Vegyük úgy, hogy nekünk csak 250pixel széles helyünk van. Módosítsuk a kódunkat:

elem{

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

}

És most számoljunk: 220px széles az elem. Az eltartás 10-10px, a keret 5-5px, margónk pedig nincs. Az eredmény 220+20+10=250px.

Ezek voltak a doboz modell alapjai. A hét folyamán végignézzük a modell elemeit és részletesebben is megismerkedünk vele.