CSS box-sizing – Padding i border v celkové šířce elementu

css

Třetí verze kaskádových stylů přináší poměrně zajímavou možnost, jak si zpříjemnit kalkulování rozměrů všech elementů. Jistě to všichni známe – chceme mít prvek široký přesně 250 pixelů, ale musíme do tohoto rozměru zakalkulovat i padding a border elementu. Ten poté při ladění stylu často měníme, a celkovou šířku je nutné znovu přepočítávat.

CSS 3 nám však přináší vlastnost box-sizing, do které můžete vložit hodnotu border-box a ta se poté postará o to, aby byl padding a border daného prvku již započítán do celkové šířky. Další hodnotu, kterou může tato vlastnost nabít je buď klasické inherit, či content-box, které vrátí kalkulaci šířky do původního stavu – tedy se započítáním paddingu i borderu.

Jakkoliv je tato vlastnost skvělá, zatím ji bohužel nepodporuje Firefox, kvůli kterému musíme volit alternativní zápis v podobě -moz-box-sizing. To je však jistě jen otázkou času  a já říkám, jen víc takových vychytávek!

Syntaxe

Comments

  1. By Krencl

    Odpovědět

    • By admin

      Odpovědět

      • By Krencl

        Odpovědět

        • By admin

          Odpovědět

          • By ondra

          • By admin

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *