Ugrás a fő tartalomhoz

CSS dobozmodell

1. Mi a dobozmodell?​

A CSS dobozmodell írja le, hogy a böngésző hogyan jeleníti meg az elemeket. Minden HTML elem egy téglalapként (dobozként) jelenik meg, amely a következő részekből áll (kívülről befelé):

  1. Margó (margin) - külső térköz
  2. Szegély (border) - keret
  3. Belső margó (padding) - belső térköz
  4. Tartalom (content) - maga az elem tartalma

Vizuális megjelenítés:​

+------------------------+
|       MARGIN          |
|  +----------------+   |
|  |    BORDER     |   |
|  |  +----------+ |   |
|  |  | PADDING  | |   |
|  |  |   +--+   | |   |
|  |  |   |  |   | |   |
|  |  |   +--+   | |   |
|  |  |CONTENT   | |   |
|  |  +----------+ |   |
|  +----------------+   |
+------------------------+

2. A dobozmodell részei​

1. Tartalom (Content)​

div {
    width: 200px;     /* szélesség */
    height: 100px;    /* magasság */
}

2. Belső margó (Padding)​

div {
    padding: 20px;               /* minden oldalon 20px */
    padding: 10px 20px;         /* fent-lent 10px, jobb-bal 20px */
    padding: 10px 20px 15px 25px; /* fent, jobb, lent, bal */
    
    /* Vagy külön-külön: */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;
}

3. Szegély (Border)​

div {
    border: 1px solid black;    /* vastagság stílus szín */
    
    /* Vagy részletesen: */
    border-width: 1px;
    border-style: solid;        /* solid, dotted, dashed, double stb. */
    border-color: black;
    
    /* Egy oldal külön: */
    border-top: 1px solid black;
    border-right: 2px dashed red;
    border-bottom: 3px dotted blue;
    border-left: 4px double green;
}

4. Margó (Margin)​

div {
    margin: 20px;               /* minden oldalon 20px */
    margin: 10px 20px;         /* fent-lent 10px, jobb-bal 20px */
    margin: 10px 20px 15px 25px; /* fent, jobb, lent, bal */
    
    /* Vagy külön-külön: */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
}

3. Box-sizing tulajdonság​

Az alapértelmezett dobozmodell (content-box)​

div {
    width: 200px;
    padding: 20px;
    border: 1px solid black;
    /* Teljes szélesség = 200px + 40px + 2px = 242px */
}

Modern dobozmodell (border-box)​

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid black;
    /* Teljes szélesség = 200px */
}

4. Elemek méretezése​

Fix méret​

div {
    width: 200px;
    height: 100px;
}

Minimum és maximum méretek​

div {
    min-width: 100px;
    max-width: 500px;
    min-height: 50px;
    max-height: 300px;
}

Relatív méretek​

div {
    width: 50%;          /* szülő elem szélességének 50%-a */
    width: 20vw;         /* viewport szélesség 20%-a */
    height: 50vh;        /* viewport magasság 50%-a */
}

5. Túlcsordulás kezelése​

Overflow tulajdonság​

div {
    width: 200px;
    height: 100px;
    overflow: visible;    /* alapértelmezett - túllóg */
    overflow: hidden;     /* levágja a túllógó részt */
    overflow: scroll;     /* görgetősáv mindig */
    overflow: auto;       /* görgetősáv ha kell */
}

6. Gyakorlati példák​

1. Kártya komponens​

.card {
    width: 300px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.card img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

2. Központosított konténer​

.container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

7. Jó gyakorlatok​

  1. Box-sizing használata
/* Alkalmazzuk minden elemre */
* {
    box-sizing: border-box;
}
  1. Margók összeomlása (margin collapse)
  • Függőleges margók összeolvadnak
  • A nagyobb margó érvényesül
/* Használjunk padding-ot margó helyett, ha el akarjuk kerülni */
.elem {
    padding-top: 20px;
    padding-bottom: 20px;
}
  1. Relatív méretek használata
.responsive-elem {
    max-width: 100%;
    height: auto;
}

8. Gyakori hibák és megoldásaik​

  1. Váratlan teljes szélesség
/* Probléma */
.box {
    width: 100px;
    padding: 20px;
    border: 1px solid black;
}

/* Megoldás */
.box {
    box-sizing: border-box;
    width: 100px;
}
  1. Margók összeomlása
/* Probléma */
.elem1 { margin-bottom: 20px; }
.elem2 { margin-top: 20px; }

/* Megoldás */
.elem1 { margin-bottom: 20px; }
.elem2 { padding-top: 20px; }

9. Gyakorló feladatok​

1. Alapfeladat​

Készíts egy kártya komponenst:

  • Fix szélesség
  • Padding minden oldalon
  • Vékony szegély
  • Lekerekített sarkok
  • Középre igazított tartalom

2. Haladó feladat​

Készíts egy reszponzív galériát:

  • Flexibilis szélesség
  • Maximum szélesség beállítása
  • Megfelelő térközök az elemek között
  • Túlcsordulás kezelése

10. Ellenőrző kérdések​

  1. Mik a dobozmodell fő részei?
  2. Mi a különbség a content-box és border-box között?
  3. Hogyan lehet egy elemet vízszintesen középre igazítani margókkal?
  4. Mikor érdemes relatív méreteket használni?
  5. Mit jelent a margók összeomlása?

A következő leckékben a különböző pozicionálási módszerekkel és a flexbox layouttal fogunk foglalkozni, amelyek segítenek az elemek pontos elhelyezésében a weboldalon.