CSS / Marginesy
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")