CSS box-sizing

2017.11.10.

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.

<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;
}