> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/css/doboz-modell.md).

# Doboz modell

## Tömbszerű (vagy blokkos) elemek jellemzői

A **blokkos** elemek vízszintesen kitöltik, a rendelkezésre álló helyet, mellettük más elem nem lehet, az elem maga előtt és után sortörést hoz létre. Magasságuk a tartalmuktól függ, a tartalom tolja szét a **blokkos** elemeket függőlegesen. 

A böngészők blokkos elemként jelenítik meg az ebbe a kategóriába tartozó HTML elemeket - [lásd HTML elemek listája](https://digikiad.gitbook.io/digitalis-kiadvanyok/html/html-elemek#felsorolt-elemek-listaja).

CSS-el fel lehet ruházni ezzel a megjelenítési móddal a nem blokkos elemeket is.

```css
span {
    display: block;
}
```

## Tartalom - content

Ha külön nem határozzuk meg egy blokkos elem szélességét, és magasságát, az elem 100% széles lesz,  vízszintesen teljesen kitölti a rendelkezésre álló helyet. Az elem magasságát a tartalma határozza meg, például a benne lévő szöveg. Tartalom hiányában az elem *0px* magasságú.

![](/files/-LYNKwfVmfWesZEgX3Jd)

A blokkos elemeknek megadhatjuk a szélességégét, magasságát a `width` és a `height` CSS tulajdonságokkal, ez felülbírálja az alapbeállításokat, az elem magassága függetlenül méretezhető a tartalmától, szélessége függetlenül méretezhető a rendelkezésre álló helytől. 

Alapestben a böngésző határozza meg a `width` és `height` értékét, ez az *auto*, vagyis a fentebb taglalt elvek alapján számítja a szélességet, és magasságot.

```css
div {
    width: 60%; /* szélesség */
    height: 640px; /* magasság */
}
```

A szélességnek, és a magasságnak megadhatunk minimum és maximum értéket is:

```css
div {
    min-width: 15%;     /* legkissebb szélesség */
    min-height: 15em;   /* legkisebb magasság */
    max-width: 125px;   /* legnagyobb szélesség */
    max-height: 55%;    /* legnagyobb magasság */
}
```

A `min-height`, és `min-width` CSS tulajdonságokban meghatározott érték alá nem csökken az elem szélessége és magassága (alapértéke *0px*).

A `max-height`, és `max-width` CSS tulajdonságokban meghatározott érték fölé nem növekszik az elem szélessége és magassága (alapértéke *none*, vagyis nincs felső méret korlát).

## Belső margó - padding

A blokkos elemeknek meg lehet adni belső margót a `padding` CSS tulajdonsággal, ez felveszi a háttér színét, és belső eltartása hozzáadódik a tartalom szélességéhez és magasságához (alapértéke *0px*), a tartalom és az oldal széle között képezve eltartást (úgy kell elképzelni, mint egy hagyományos képkeret esetén a paszpartut a festmény és maga a képkeret között).

![A belső margó a tartalom, és az elem széle között képez eltartást.](/files/-LYNjjPBogttBuxeIvdF)

A `padding` -et megadhatjuk külön külön oldalanként, a `padding-top`, `padding-right`, `padding-bottom` és `badding-left` CSS tulajdonságokkal:

```css
div {
    padding-top: 10px;     /* Felső padding */
    padding-right: 20px;   /* Jobb padding */
    padding-bottom: 3em;  /* Alsó padding */
    padding-left: 15%;    /* Bal padding */
}
```

Vagy gyorsírásos módszerrel, felsorolhatjuk az összes oldalt is (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

```css
div {
    /* Gyorsírásos padding oldalankén különböző értékkel */
    padding: 10px 5px 3px 1px;
}
```

Meghatározhatjuk egy érték megadásával az összes oldal `padding` értékét is, feltételezve, hogy az összes oldal belső margójának mérete megegyezik:

```css
div {
    padding: 3em;      /* Gyorsírásos padding */
}
```

## Keret - border

A blokkos elemeknek lehet kerete, a keret megjelenik vizuálisan, és hozzáadódik az elem magasságához és szélességéhez. Ha a keretnek vannak átlátszó részei az elem háttere látszódik ezeken a területeken.

![A belső margón kívül helyezkedik el a keret (jelen esetben vörös színnel).](/files/-LYOETDARajpxpbjmwyX)

### **Keret stílus**

A `border-style` (keret stílus) tulajdonsággal határozhatjuk meg a keret vizuális megjelenését (alapértéke a *none,* vagyis nincs keret).

Lehetséges értékei:

* *none, hidden - nincs keret*
* *solid - folytonos vonal*
* *dotted - pontozott*
* *dashed - szaggatott vonal*
* *double - dupla vonal*
* *outset - kiemelkedő*
* *inset - süllyesztett*
* *groove - bemélyített*
* *ridge - kidomborodó*

![](/files/-LPRrVO_iXQTiKaX1HJ8)

```css
div {
    border-top-style: none;      /* Felső keret stílus */ 
    border-right-style: solid;  /* Jobb keret stílus */
    border-bottom-style: dotted; /* Alsó keret stílus */
    border-left-style: dashed;   /* Bal keret stílus */
}
```

A keret stílust is megadhatjuk gyorsírásos formában (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

```css
div {
    /* Gyorsírásos keret stílus oldalanként különböző értékekkel */
    border-style: solid none dotted dashed;    
}
```

Lehetőség van az összes oldal keretének `border-style` értékét is beállítani egy értékkel, feltételezve, hogy az összes oldal keret stílusa megegyezik:

```css
div {
    border-style: solid;    /* Gyorsírásos keret stílus */    
}
```

### **Keret szélesség**

A `border-width` (keret szélesség) tulajdonságnak az értéke adja a keret vastagságát. Negatív értéket nem vehet fel (alapértéke *medium*, vagyis közepes).

```css
div {
    border-top-width: 1px;     /* Felső keret szélesség */
    border-right-width: 1em;   /* jobb keret szélesség */
    border-bottom-width: 5px;  /* Alsó keret szélesség */
    border-left-width: 1.2rem; /* Bal keret szélesség */
}
```

A keret szélesség megadható gyorsírásos formában, oldalanként eltérő értékkel (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

```css
div {
    /* Gyorsírásos keret szélesség oldalanként különböző értékekkel */
    border-width: 1px 2px 3px 4px;
}
```

Egy értékkel meghatározva is megadhatjuk az összes oldal keret szélességét, feltételezve, hogy minden oldalon megegyezik az értéke:

```css
div {
    border-width: 15px;     /* Gyorsírásos keret szélesség */
}
```

### **Keret szín**

A `border-color` a keret színét határozza meg. Értéke lehet bármely CSS színrendszer szerinti szín (alapértéke felveszi a szövegszínt, vagyis a `color` tulajdonságban meghatározott színt).

```css
div {
    border-top-color: rgba(255, 0, 0);    /* Felső keret szín */
    border-right-color: green;            /* Jobb keret szín */
    border-bottom-color: #0000ff;         /* Alsó keret szín */
    border-left-color: #ff0;              /* Bal keret szín */
}
```

![Oldalanként eltérő keret szín.](/files/-LYceY3xry_jJo_TsyAv)

A keret színt is megadhatjuk gyorsírásos formában (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

```css
div {
     /* Gyorsírásos keret szín oldalanként eltérő színnel */
    border-color: #e1e1e1 #d3d3d3 #d4d4d4 #e2e2e2;            
}
```

Meghatározhatjuk egy érték megadásával az összes oldal `border-color` értékét is, feltételezve, hogy az összes oldal keretének színe megegyezik:

```css
div {
    border-color: purple;             /* Gyorsírásos keret szín */
}
```

### **Gyorsírásos keret**

Gyorsírásos módszerrel megadhatjuk **oldalanként** a kereteket, ehhez meg kell adnunk a keret színét, stílusát és szélességét szóközökkel elválasztva `border-top`, `border-right`, `border-bottom` vagy `border-left` CSS tulajdonságokban meghatározva:

```css
div {
    border-top: 5px solid black;       /* Gyorsírásos felső keret */
    border-right: none;                /* Gyorsírásos jobb keret */
    border-bottom: 3px double #449b44; /* Gyorsírásos alsó keret */
    border-left: 1px dashed red;       /* Gyorsírásos bal keret */
}
```

Egy még kompaktabb megoldás, amikor az összes oldal keretét egy `border` tulajdonságban írjuk le, feltételezve, hogy a keret minden oldalon egyező stílussal színnel, és vastagsággal rendelkezik:

```css
div {
    border: 1px solid purple;          /* Gyorsírásos keret */
}
```

## Külső margó - margin

A `margin`, vagy külső margó az elemek közötti eltartást határozza meg. Értéke lehet negatív, ebben az esetben egymásra csúsznak az elemek. Alapértéke *0px*.

```css
div {
    margin-top: 1.25em;     /* Felső margó */
    mergin-right: auto;     /* Jobb margó */
    margin-bottomm: 33px;   /* Alsó margó */
    margin-left: -25px;     /* Bal margó */
}
```

![Ebben a példában a gyermek elem margója függőlegesen szétnyomja a szülő elemet.](/files/-LYY-o9jDTB_Kdl2rQd7)

A `margin` esetében is van gyorsírásos variáns,  oldalanként külön értékkel (fentről kezdve az óra járásával megegyező irányban következnek az oldalak):

```css
div {
    /* Gyorsírásos margin oldalankén különböző értékkel */
     margin: 0 auto 15px auto;
}
```

Be tudjuk állítani egy érték megadásával az összes oldal `margin` értékét is, feltételezve, hogy az összes oldal margójának mérete megegyezik:

```css
div {
    margin: 3em;      /* Gyorsírásos margin */
}
```

A `margin`-nak van egy speciális értéke, ez az *auto*, vagy automatikus margó, ha ezt vízszintesen, vagyis jobb és, vagy bal oldalt megkapja egy elem, a margója az adott oldalon addig nyúlik, amíg a rendelkezésre álló hely el nem fogy. Ez lehetővé teszi, hogy automatikus margóval balra, középre, vagy jobbra rendezzük a blokkos megjelenítésű elemeket.

```css
div {
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    margin-left: auto;  /* Jobbra tolja az elemet */
}
```

![Ebben a példában a bal oldali auto margin jobbra tolja az elemet.](/files/-LYYAb7l7K9_97iOCKZV)

```css
div {
    margin-top: 50px;
    margin-bottom: 50px;
    /* A bal és jobb oldali auto margin középre rendezi az elemet: */
    margin-right: auto;
    margin-left: auto; 
}
```

![A bal és jobb oldali auto margin vízszintesen középre rendezi az elemet.](/files/-LYYBts1Wsl_C-X2xl-H)

Az *auto* `margin` számos CSS megoldás alapját képezi, lásd:

{% content-ref url="/pages/-LSA3T2TtY1SjptMsT3x" %}
[Középre rendezés](/digitalis-kiadvanyok/css-technikak/koezepre-rendezes.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LSA3tTZZBKUKlfmLtzO" %}
[Konténer középre rendezése](/digitalis-kiadvanyok/css-technikak/kontener-koezepre-rendezese.md)
{% endcontent-ref %}

{% hint style="info" %}
Alapesetben függőlegesen hatástalan az automatikus margó, ha egy elem `margin-top` vagy `margin-bottom` tulajdonságát *auto*-ra állítjuk, akkor a böngésző azt nullának fogja venni, ez alól kivételt képez a *flex* (rugalmas) megjelenítési mód, ahol a rugalmas elemekre vertikálisan is alkalmazható az automatikus margó.
{% endhint %}

## Doboz méretezése - box-sizing

A `box-sizing` tulajdonság alapján számolja a böngésző az elemek méretét.

Két lehetséges értéke lehet, az **alapérték** a *content-box* ebben az estben az elem tartalmának szélességéhez, magasságához **hozzáadódik** a belső margó és a keret szélessége, magassága.

![](/files/-LcN2BF7KO0DwOv7Idz2)

Sötétebb kékkel a `padding`, és a `border`, alapestben ezek hozzáadódnak az elem szélességéhez (fehér nyilakkal jelölve).

```css
div {
    box-sizing: content-box;
}
```

A `box-sizing` tulajdonság második lehetséges értéke a *border-box*, amikor a szélességbe, és magasságba **beleszámít** a belső margó és a keret szélessége, magassága.

![](/files/-LcN2Xc27TbWdOrBsc-r)

*Border-box* esetében a `padding`, és a `border` nem növeli az elem méretét, befelé képződik (fehér nyilakkal jelölve).

```css
div {
    box-sizing: border-box;
}
```

## Ábra

![](/files/-LPQ050QtbXF7hC44o_L)