Znaczniki języka html dzielą się na blokowe i śródliniowe. Domyślnie zdecydowana większość to elementy blokowe, które mogą zawierać w sobie tekst, elementy śródliniowe oraz inne elementy blokowe. Chcąc nauczyć się nimi posługiwać tak, żeby w przyszłości być w stanie w oparciu o nie budować układy stron należy nauczyć się prawidłowo nadawać i określać ich rozmiar.
Elementem typu block, którego używa się niezwykle często podczas budowy układu strony jest div. W założeniu grupuje on elementy blokowe w sekcje łączące pasujące do siebie treści dzięki czemu możemy przypisywać im style w CSS. Do niedawna był on w zasadzie jedynym elementem o takim zastosowaniu. W HTML5 pojawiły się nowe elementy strukturalne wskazujące na rodzaj treści w nich zawartych, ale kiedy, żaden z nich nie pasuje do zawartości nadal używać będziemy divów.
div#blok1 {
height: 100px;
width: 100px;
}Kod ten ustala wysokość i szerokość diva o identyfikatorze blok1 na 100 pixeli.
UWAGA! ustalenie w ten sposób wysokości i szerokości wcale nie oznacza, że element blokowy zajmie na ekranie właśnie tyle miejsca. Oznacza to jedynie tyle, że miejsce na jego treść (content) będzie miało taki obszar. Do ustalenia ilości miejsca zajętego na ekranie potrzebujemy znać jeszcze wielkości dopełnienia wewnętrznego, marginesów i szerokości obramowania.
Domyślnie przeglądarki ustawiają szerokość elementów blokowych na 100%, zatem, bez odpowiednich zabiegów, każdy z nich znajdzie się pod swoim poprzednikiem
Padding jest kolejną wielkością, która wpływa na rozmiar zajęty na ekranie przez element blokowy, na przykładzie obok widać, gdzie dokładnie się on znajduje. Stanowi on wypełnienie pomiędzy treścią a obramowaniem. Dzięki niemu tekst nie będzie bezpośrednio przylegał do linii border. Warto zwrócić uwagę, że tło ustawione dla bloku będzie widoczne nie tylko w obszarze treści ale również w paddingu.
Obramowanie czyli border, jest następną w kolejności za treścią i paddingiem rzeczą, o której należy pamiętać myśląc o przestrzeni zajmowanej przez elementy blokowe. Border, co prawda zazwczaj ma 1 lub kilka pixeli, ale nie uwzględniony potrafi spowodować “spadek” następnego elementu blokowego pod spód. Jeżeli chcemy uzyskać “okrągłą” liczbę pixeli zajmowanych na ekranie, warto pixele wykorzystane przez obramowanie odliczyć od paddingu bądź, jakiejkolwiek z pozostałych wartości. Mały problem może pojawić się jeżeli odliczmy tą wartość od magrinesu ze względu na jego charakterystyczną cechę, ale o tym już za chwilę.
Marginesy to zewnętrzne odstępy bloku od pozostałych elementów. Jak już wspomniałem przed chwilą mają one jedną charakterystyczną cechę, którą należy mieć na uwadze. Jeżeli ustawimy dla dwóch sąsiadujących ze sobą w pionie bloków marginesy po 100 pixeli to odstęp między nimi nie wyniesie 200, ale właśnie 100 pixeli, ze względu na to, że marginesy niejako “nachodzą” na siebie. Nie dotyczy to bloków sąsiadujących w poziomie z właściwością float – w takim przypadku marginesy sumują się.
div#blok1 {
height: 100px;
width: 100px;
padding: 24px;
border: 1px solid black;
margin: 50px;
}W tym przykładzie określilismy wszystkie wielkości związane z całkowitym rozmiarem naszego diva. Podsumujmy: mamy kwadratowy obszar treści – wielkości 100 na 100 pixeli, następnie padding, po każdej stronie elementu po 24 pixele, co razem daje 48, następnie obramowanie, 2 razy po 1 pixel czyli z paddingiem i treścią łącznie 150 pixeli wysokości i szerokości na ekranie. Poza tym po każdej stronie elementu mamy 50 pixeli marginesu, czyli całkowity zajęty obszar wyniesie w pionie i poziomie po 200 pixeli. Jeżeli jednak dwa bloki o takich parametrach ustawimy w pionie – ich łączna wysokość wyniesie 350px, ze względu na nachodzący na siebie w takiej sytuacji margines.
W Internet Explorer 8 i starszych jego wersjach jeżeli nie wykonamy deklaracji DOCTYPE na początku dokumentu – padding i border będą wliczały się do szerokości i wysokości.
Jeżeli sami pisaliśmy cały kod – powinniśmy znać wymiary poszczególnych elementów, chociaż nawet w takiej sytuacji można się w tym czasem pogubić. Kiedy pracujemy na kodzie kogoś innego – samodzielne analizowanie całego dokumentu w celu poznania jego modelu blokowego może być bardzo nieprzyjemnym doświadczeniem. W tej sytuacji przydatne mogą być narzędzia takie jak plugin do przeglądarki Mozilla Firefox o wdzięcznej nazwie Firebug, bądź wbudowane narzędzie Google Chrome, w którym wystarczy kliknąć PPM na dowolnym fragmencie strony i wybrać Zbadaj element bądź Inspect element w anglojęzycznej wersji. Przesuwając myszą po wyświetlonym w dolnej części ekranu kodzie, będziemy mogli podejrzeć wyszczególnione kolorami wielkości contentu, paddingu i marginesów.
