CSS box-sizing

Szerző:   |   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
  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...