Przejdź do treści

Marginesy

Wymiarowanie pudełka

(CSS 3 - interpretuje Internet Explorer 8, Firefox 29, Opera, Chrome)

selektor { box-sizing: rodzaj }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

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:

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")

Komentarze

Zobacz więcej komentarzy