Mérei Tamás webdesigner

Helló!Mérei Tamás vagyok, webdesigner

20 éve foglalkozom weboldalak, felhasználói felületek tervezésével, kódolásával és WordPress sablonok készítésével. Dolgozom magánszemélyeknek, fejlesztő cégeknek, multiknak, állami szervezeteknek és reklámügynökségeknek is.

CSS box-sizing

A CSS box-sizing tulajdonsággal tudjuk megadni, hogy az adott elem szélessége hogyan kerüljön kiszámításra. A W3C szabvány szerint leírása itt olvasható angol nyelven.

CSS box-sizing: content-box

Az alapértelmezett beállítás content-box, ahol az elem szélességébe nem tartozik bele a padding és a border értéke.

Az alábbi példában a doboz szélessége 260px lesz, mert az alap 200-as szélességhez hozzáadódik oldalanként 20px padding, és 10px border.


<style type="text/css">
    div {
        box-sizing: content-box;
        width: 200px;
        padding: 20px;
        border: 10px solid #000
    }
</style>
<div>teljes szélesség 260px</div>

CSS box-sizing: border-box

border-box esetén az elem szélességét az alapszélesség + padding + border együttes értéke adja.

Az alábbi példában a doboz szélessége 200px lesz, amibe beletartozik a padding és a border által hozzáadott érték is. A fennmaradó „hasznos terület” 140px lesz.

CSS box-sizing


<style type="text/css">
    div {
        box-sizing: border-box;
        width: 200px;
        padding: 20px;
        border: 10px solid #000
    }
</style>
<div>teljes szélesség 200px</div>

Milyen problémákat okozhat?

Nézzük meg az alábbi kódot:


<style type="text/css">
    div {
        width: 300px;
        padding: 20px;
        background: #ddd
    }
    div input[type="text"] {
        width: 100%;
        border: 1px solid #999;
        padding: 10px
    }
</style>
<div>
    <input type="text">
</div>

Mivel az input padding értéke a 100% szélességhez fog hozzáadódni, emiatt ki fog lógni a befoglaló div-ből és ez lesz az eredménye:

Írjuk át a box-sizing értékét border-box-ra!


<style type="text/css">
    div {
        width: 300px;
        padding: 20px;
        background: #ddd
    }
    div input[type="text"] {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid #999;
        padding: 10px
    }
</style>
<div>
    <input type="text">
</div>

Így mindjárt más:

Melyiket használjam?

A border-box használata egyértelműen egyszerűbb és jobb megoldás. Az alábbi kódrészlet a Bootstrap-ből származik. Azzal indít, hogy az összes elemen plusz a ::before és ::after szelektorokon is border-box-ra állítja a box-sizing értékét. Ez jó megoldás és célszerű használni.


*,
*::before,
*::after {
  box-sizing: border-box;
}