Wymiarowanie pudełka {box-sizing}
Jak zmienić zasady obliczania faktycznych rozmiarów elementów na stronach WWW?
CSS 3
selektor { box-sizing: rodzaj }Natomiast jako "rodzaj" należy podać:
- content-box
- Wymiarowanie zgodne z modelem pudełkowym
- border-box
- Wymiarowanie zgodne z trybem Quirks
Bardzo stare przeglądarki (w zamierzchłych czasach MSIE 5) nie potrafiły wymiarować bloków zgodnie ze specyfikacją CSS. Sytuacja ta już dawno uległa poprawie, jednak w celu zachowania kompatybilności wstecz, niektórzy producenci przeglądarek decydowali się na wprowadzenie w swoich nowych produktach trybu niezupełnej zgodności ze standardami - Quirks. Twórcy serwisów WWW, które powstawały bardzo dawno temu, a nadal funkcjonują w sieci, mogą chcieć wymusić wyświetlanie ich według dawnego sposobu interpretacji, aby nadal prezentowały się poprawnie.
Warto zauważyć, że przy wymiarowaniu "border-box" miejsce na faktyczną zawartość treści w elemencie kurczy się w miarę dodawania marginesów wewnętrznych oraz obramowania. Może się zdarzyć zatem, że na właściwą zawartość w ogóle już nie wystarczy miejsca. Nie jest możliwe natomiast, aby właściwa zawartość treści elementu miała wartość ujemną.
Używanie deklaracji "box-sizing: border-box" na nowych stronach raczej nie jest zalecane, gdyż może wprowadzić spore zamieszanie przy późniejszej rozbudowie serwisu.
Przykład {box-sizing}
wymiarowanie domyślne ("width: 300px")
"box-sizing: content-box" ("width: 300px")
"box-sizing: border-box" ("width: 300px")
wymiarowanie domyślne - bez obramowania ani marginesu wewnętrznego ("width: 300px")
Pytania i odpowiedzi {box-sizing}
Do czego służy "box-sizing"?
Właściwość CSS box-sizing pozwala kontrolować sposób obliczania całkowitego rozmiaru elementu, uwzględniając marginesy, padding i obramowanie. Dzięki temu można precyzyjnie zarządzać wymiarami elementów w modelu pudełkowym. Domyślnie wartość box-sizing to content-box, gdzie szerokość i wysokość elementu obejmują tylko treść.
Co to jest "box-sizing: border-box"?
"box-sizing: border-box" to wartość właściwości CSS box-sizing, która definiuje, że szerokość i wysokość elementu będą obejmować treść, padding oraz obramowanie, ale nie będą uwzględniać marginesów. Dzięki temu, niezależnie od dodanych paddingów i obramowania, cały rozmiar elementu będzie taki, jak został określony.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
box-sizing: wartość | 10 2011-03-08 | 29 2014-04-29 | 12 2015-07-29 | 7 2003-01-28 | 5.1 2011-07-20 |
box-sizing: border-box | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |
box-sizing: content-box | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 3 2007-10-26 |