5.05 Dobozmodell

Mint korábban írtam vannak olyan HTML elemek, amelyek a képernyőn dobozként, azaz téglalap alakú területen helyezkednek el és vannak olyanok, amelyek úgynevezett inline, azaz soron belüli elemek. A <div>, és a <span> tageknek az égvilágon semmilyen default tulajdonsága nincsen azon kívül, hogy a <div> a dobozmodell alá tartozik, míg a <span> egy inline tag.

• A <div> alapértelmezett tulajddonsága : display: block;
• A <span> alapértelmezett tulajdonsága: display: inline;

Dobozmodell

A blokk elemekre vonatkozik a dobozmodell.

A fenti példában a vastag kerettel "Lorem Ipsum..." szöveg jelenti a blokkban lévő tartalmat.

padding

A blokkban lévő tartalom és a blokk keretének távolságát belső margónak hívjuk magyarul.

Beállíthatjuk a doboz minden oldalára egyszerre, de beállíthatjuk külön külön is az oldalakra:

• padding: 5px;
• padding-left: 2px;
• padding-right: 2px;
• padding-top: 3px;
• padding-bottom: 3px;

border

A blokk keretét egyszerre is beállíthatjuk, de oldalanként külön-külön is. A border egy sor tulajdonságát is tudjuk állítani külön-külön is.

• border: 10px solid grey; - ebben a példában az ábra dobozának ezek a tulajdonságai: vastagsága: 10px, stílusa: solid = "folytonos vonal", színe: grey = szürke színű

Ha a border vastagsága 0, akkor nincsen border. Ha a border stílusa none, akkor nincsen border.

A keret stílusai az alábbiak lehetnek

• dotted - pontozott keret
• dashed - gondolatjelekből álló keret
• solid - folytonos keret - leggyakrabban használt!
• double - dupla keret
• groove - 3D bemélyedés (barázda). Függ a border-color paramétertől.
• ridge - 3D kiemelkedésr. Függ a border-color paramétertől.
• inset - Belső keret. 3D hatása van. Függ a border-color paramétertől.
• outset - Defines a 3D outset border. Függ a border-color paramétertől.
• none - nincs keret
• hidden - rejtett keret.

A keretek tulajdonságait külön-külön is lehet állítani

• border-style - Külön állíthatjuk be oldalanként. pl. border-left-style: solid;  a bal oldali keret solid lesz.
• border-color - a keret színét állítja be. Például a border-right-color: red; a jobb oldali keret vörös lesz
• border-width - a keret vastagságát állíthatjuk be: pl. border-width: 10px; - a keret minden oldala 10 pixel vastag lesz!
• border-radius - ezzel a paraméterrel lekerekített sarkú kereteket tudunk előállítani, ahol a paraméter a kerekítés sugara. pl: border-radius: 5px; 5pixel sugarú lekerekített sarkot ad.
  Figyelem: Ha lekerekített keretet használunk, akkor érdemes a padding értéket is legalább olyan nagyra választani, amennyi a border-radius értéke, hogy a doboz tartalma annyival beljebb kezdődjön a kerettől, amennyi a kerekítés mérete!

Margin

A doboz körül a következő, vagy a szülő TAG-ig terjedő távolságot margónak hívjuk.

margin - vastagság beállítása

margin: top, right, bottom, left;

pl.

• margin: 10px 5px 10px 5px;
• padding: 4px 10px 4px 10px;
• padding: 5px 1em 5px 1em;
• padding: 0.5em 1em 0.5em 1em;