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
  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...

  • Bootstrap carousel

    https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery...

  • Bootstrap carousel

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá...