Box model, czyli o rozmiarach pudełka słów kilka @ Dziennik Yano

12 lipca 2006, 01:08:33

Box model, czyli o rozmiarach pudełka słów kilka

Prawidłowa interpretacja tzw. box model często nastręcza wiele problemów. Świadczą o tym pojawiające się na forach i grupach dyskusyjnych pytania, czemu dany element ma inne rozmiary w Firefoksie niż w IE. Mam nadzieję, że poniższa ilustracja rozwieje wszelkie wątpliwości:

Wg specyfikacji CSS 1 własności width i height definiują rozmiary elementu, padding — odległość elementu od otaczającej go ramki (border) a margin — odległość od innych elementów na stronie. Całkowity rozmiar kontenera (lub też pudełka, z ang. box) poznamy, dodając do siebie poszczególne wartości. Jeśli więc mamy np. obrazek o wymiarach 200px×100px i chcemy go otoczyć ramką o grupości 2px, która ma być w odległości 5px od obrazka i 10px od innych elementów to całkowity obszar zajmowany przez ten obrazek będzie wynosił 200+(5+2+10)×2=234px w poziomie i 100+(5+2+10)×2=134px w pionie.

Niestety najpopularniejsza przeglądarka łamie ten schemat stosując własności width i height do obszaru objętego ramką, pomniejszając obszar oznaczony na ilustracji żółtym kolorem o wartości border i padding. Wystarczy jednak na początku dokumentu zamieścić prawidłową deklarację DOCTYPE, żeby przestawić Internet Explorer tzw. tryb standardów (odpowiedni artykuł można znaleźć w bazie MSDN), w którym powyższy „model pudełkowy” zostanie wyświetlony prawidłowo. Oczywiście należy się też postarać, żeby cały dokument był zgodny ze standardem, który został zadeklarowany.

Przykłady prawidłowych deklaracji to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

html > body {border:1px solid red;}

Ta notka została wysłana 12 lipca 2006 o 01:08:33.
Tagi: border box model css margin padding
Możesz przejść na koniec i zostawić komentarz lub umieścić trackback ze swojej strony.

Poprzedni wpis:
Zrozumieć reklamę Następny wpis:
Możecie mi skoczyć

Ostatni odwiedzający:

Komentarze do notki Box model, czyli o rozmiarach pudełka słów kilka

npck powiedział(a):
12 lipca 2006 o 01:30:34
Zaciekawiło mnie to: "Wystarczy jednak na początku dokumentu zamieścić prawidłową deklarację DOCTYPE, żeby przestawić Internet Explorer tzw. tryb standardów, w którym powyższy „model pudełkowy” zostanie wyświetlony prawidłowo. "
Mógłbym prosić o przykład takiej deklaracji?
Yano powiedział(a):
12 lipca 2006 o 01:32:12
Tak się zastanawiałem, czy podać deklaracje DOCTYPE czy nie. Ale skoro ludzie się pytają, to chyba warto.
DeJotPe powiedział(a):
12 lipca 2006 o 14:48:43
A czy przypadkiem to nie powinno być 100px+(2px+5px+10px)*2?
Bo przecież marginesy i ramki będą z dwóch stron?
Yano powiedział(a):
12 lipca 2006 o 14:50:06
Oops, faktycznie. No cóż, upał i późna pora mi dobrze nie służą.
Witia powiedział(a):
12 lipca 2006 o 15:50:44
"Wystarczy jednak na początku dokumentu zamieścić prawidłową deklarację DOCTYPE, żeby przestawić Internet Explorer tzw. tryb standardów, w którym powyższy „model pudełkowy” zostanie wyświetlony prawidłowo."

Obawiam się, że nie wystarczy
Odpowiednia deklaracja wystarczy w IE6 (należy pamiętać jednak, że umieszczenie prologu xml znów przełączy go w quirks mode). Dla starszych IE pozostają hacki albo warunki w head.
PablO powiedział(a):
12 lipca 2006 o 21:20:35
Witia: a kto się przejmuje IE5.x? ;]
mazdac powiedział(a):
13 lipca 2006 o 00:57:51
może przydałoby się umieścić jakiś wpis (najepiej z wersją graficzną) w wikipedii? jeśli ktoś szukałby to znalazłby.
gandalf powiedział(a):
13 lipca 2006 o 23:13:35
A to juz nie wystarcza? http://developer.mozilla.org/pl/docs/CSS:Na_początek:Bloki
Yano powiedział(a):
14 lipca 2006 o 01:25:04
@Gandalf: z całym szacunkiem, ale tam jakoś marnie jest wyjaśniona zależność pomiędzy rozmiarem elementu a (nazwijmy to) całego obiektu.
Poza tym mam nadzieję, że im w większej ilości miejsc będzie pełna informacja tym mniej będzie pytań na forach i grupach o podstawy. (naiwny jestem, wiem )
gandalf powiedział(a):
15 lipca 2006 o 00:39:17
Yano: z calym szacunkiem, ale czemu nie poprawisz (w ang i pol)? Wydawalo mi sie, ze lepiej miec to zebrane w jednym miejscu dla potomnosci, niz porozrzucane, a wlasnie po to stosujemy Wiki, zeby ludzie poprawiali bledy, a nie narzekali na nie ;p
Yano powiedział(a):
15 lipca 2006 o 00:52:29
Ale ja nieśmiały jestem, a Wiki (jeszcze DevMo) to tak jakoś oficjalnie. Źle zrobię i będzie na mnie.
gandalf powiedział(a):
16 lipca 2006 o 19:18:44
Yano: to ktos wycofa jak zle zrobisz... Ehh, zbiera mi sie na post objezdzajacy naszych rodzimych LebMajstrow. Mamy dwa swietne Wiki zbierajace wiedze o WWW - MDC i kurs.browsehappy.pl, a wszyscy poprzestaja na notce na swoim blogu zamiast pomoc je rozwijac
Ptaszor powiedział(a):
23 lipca 2006 o 21:53:17
@Yano: Jeśli masz obawy, że ktoś Cię objedzie, to zawsze są strony dyskusji i na nich można wyjaśniać niejasności lub wątpliwości. Można w nich swoje propozycje także dołożyć

Druga sprawa, jeśli ktoś widzi błąd na jakiejkolwiek stronie MDC, to bardzo proszę nie pozostawajcie obojętni na niego - kliknijcie po prostu Edycja i go zlikwidujcie

BTW: Jeśli chcesz to możesz poprawić wpis o css na mdc pl, tylko jeśli wprowadzisz na pl to prosiłbym także zaktualizować wersję en

Zostaw komentarz

Komentarze nie mające związku z tematem wpisu mogą (ale nie muszą) zostać usunięte. Bezwzględnie będą usuwane komentarze obraźliwe, wulgarne czy reklamowe (także w stylu onet.blog).

W komentarzach możesz korzystać z Textile.

yano78@jabber.org

12 lipca 2006, 01:08:33