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.

 
|
margin-top
|
 
--margin-left--

|
padding top
|

-- padding left -- Lorem Ipsum, lorem ipsum -- padding-right --
|
padding bottom
|

-- margin-right--
 
|
margin-bottom
|
 

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;