# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/css/doboz-modell.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.