CSS box-sizing

Szerző: Mérei Tamás   |   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
  • 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....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....