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
  • WordPress sablonkészítés

    Nem vagyok programozó, de ezek nagyon alap dolgok. A WP-ben használt függvények nevei és paraméterei megtalálhatók a dokumentációban....

  • WordPress sablonkészítés

    Szia Tamás! Valahol régebben írtad, hogy te webdesigner vagy és nem webfejlesztő (ahol már kódolás kell), mégis profin vágod a php-t. pl., hogy hívju...

  • A Bootstrap 4 grid használata

    Nem tudom, én nagy projektekbe csak alvállalkozóként megyek bele ahol órabérben lehet számlázni és a fővállalkozó garantáltan fizet. De azt is csak ak...

  • WordPress sablonkészítés

    Köszönöm szépen!...

  • WordPress sablonkészítés

    add_action( 'wp_print_styles', 'remove_css', 100 ); function remove_css() { wp_dequeue_style( 'wp-block-library' ); wp_deregister_style( 'wp-b...

  • WordPress sablonkészítés

    Szia Tamás! Hogy lehet kigyakni a head-ből az új, 5.0.2-es wordpress Gutenberg CSS link-rel sorát? Ezt: Próbáltam egy csomó remove_action-t de ...

  • A Bootstrap 4 grid használata

    Az előleg hány százalék? Ha megcsinálod az egészet, és mégsem kell neki, akkor is bukod a teljes munkadíjat, nem? Vagy fázisonként fizettesz vele?...

  • Reszponzív weboldal tervezés Bootstrap használatával

    A media object-ed tudod erre használni: https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp...

  • Reszponzív weboldal tervezés Bootstrap használatával

    Kedves Tamás! Nagyon szuper ez a videód is. Szeretnélek megkérdezni, hogy Bootstrap 3-ban működik-e az, hogy a dobozok szöveges tartalmát nem a doboz ...

  • HTML5 + CSS3 menü

    Ki az a Sanyi?...

  • Scrollbar színezgetés CSS-sel

    Köszi a választ. Igen, egyébként azt használtam, amit először küldtél, és azzal állt fent az említett probléma. Már váltottam plugint azóta, és már me...

  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...