Velikost krabice - Triky CSS

Anonim

box-sizingVlastnost CSS určuje, jak je model box s ním po prvek se vztahuje k.

.module ( box-sizing: border-box; )

Jedním z nejběžnějších způsobů jeho použití je použití na všechny prvky na stránce, včetně pseudo prvků:

*, *::before, *::after ( box-sizing: border-box; )

Často se tomu říká „univerzální velikost krabice“ a je to dobrý způsob práce! Nastavený (doslovný) widthje šířka, kterou získáte, aniž byste museli provádět mentální matematiku a spravovat složitost, která pochází ze šířek pocházejících z více vlastností. Máme tady dokonce den povědomí o velikosti krabice.

Hodnoty

  • content-box: výchozí. Hodnoty šířky a výšky se vztahují pouze na obsah prvku. Výplň a okraj jsou přidány na vnější stranu krabice.
  • padding-box: Hodnoty šířky a výšky se vztahují na obsah prvku a jeho výplň. Okraj je přidán na vnější stranu rámečku. V současné době tuto padding-boxhodnotu podporuje pouze Firefox .
  • border-box: Hodnoty šířky a výšky se vztahují na obsah, výplň a ohraničení.
  • inherit: zdědí velikost pole nadřazeného prvku.

Příklad

Tento příklad obrázku porovnává výchozí content-box(nahoře) s border-box(dole):

Červená čára mezi obrázky představuje hodnotu šířky prvků. Všimněte si, že element s výchozím nastavením box-sizing: content-box;překračuje deklarovanou šířku, když se výplň a ohraničení přidají na vnější stranu pole obsahu, zatímco element s box-sizing: border-box;aplikovaným se zcela vejde do deklarované šířky.

Použití velikosti krabice

Řekněme, že jste nastavili prvek na width: 100px; padding: 20px; border: 5px solid black;. Ve výchozím nastavení je výsledný rámeček široký 150 pixelů. Je to proto, že je výchozí model dimenzování pole content-box, který použije deklarovanou šířku prvku pouze na jeho obsah a umístí výplň a ohraničení mimo pole prvku. To efektivně zvyšuje, kolik místa prvek zabírá.

Pokud změníte box-sizingna padding-box, výplň se vloží do rámečku prvku. Pak by byl box široký 110px, s 20px polstrováním na vnitřní straně a 10px okrajem na vnější straně. Pokud chcete do rámečku vložit polstrování a ohraničení, můžete použít border-box. Krabice by pak měla šířku 100px - 10px ohraničení a 20px polstrování jsou oba zasunuty do rámečku prvku.

Ukázka

Podívejte se na Porovnání hodnot velikosti boxu pomocí CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • width
  • height
  • padding
  • border

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Jakékoli * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Libovolný *

* padding-boxnení podporováno

† starší verze vyžadují -webkitpředponu (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozpředpona požadována až do verze 28, bez předpony od 29.