Marginesy - CSS
Wymiarowanie pudełka {box-sizing}
Jak zmienić zasady obliczania faktycznych rozmiarów elementów na stronach WWW?
(CSS 3 - interpretuje Internet Explorer 8, Firefox 29, Opera, Chrome)
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
Starsze przeglądarki - w czasach MSIE 5 - nie potrafiły wymiarować bloków zgodnie ze specyfikacją CSS. Sytuacja ta uległa zmianie w momencie pojawienia się MSIE 6. Jednak w celu zachowania kompatybilności wstecz, niektórzy producenci przeglądarek zdecydowali się na wprowadzenie w swoich nowych produktach trybu niezupełnej zgodności ze standardami - Quirks. Twórcy serwisów WWW, które powstawały 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
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.