CSS box-sizing

2017-11-10

A box-sizing CSS3 tulajdonsággal tudjuk megadni, hogy az adott elem szélessége hogyan kerüljön kiszámításra.

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>

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

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....