Elementy liniowe i blokowe

Być może Twoją uwagę zwrócił fakt, iż niektóre elementy, takie jak chociażby pogrubienieb, czy kursywaisą wyświetlane w jednej linii z otaczającym je tekstem, natomiast inne, takie jak akapityp, czy nagłówkih1są wyświetlane zawsze od nowej linii.

Elementy blokowe (ang. block)

Znaczniki, które zawsze wyświetlane są od nowej linii i zajmują całą dostępną szerokość. Jeżeli wstawisz taki element np. do

body to domyślnie będzie on zajmował całą szerokość strony (lub swojego rodzica, jeżeli jest zagnieżdżony). Nowe

elementy są przerzucane do nowej linii, nawet jeśli obok poprzedniego elementu blokowego jest jeszcze dużo wolnego miejsca.

Np:

• h1-h

• p

• table

• ul,ol,li

• blockquote

• pre

• hr

Elementy liniowe

Druga z grup to elementy liniowe. Podczas wyświetlania na stronie, tagi z tej grupy zajmują tylko tyle miejsca ile potrzebują, pozostawiając w tej samej linii miejsce dla kolejnych elementów liniowych.

Liniowe

(ang.

inline

) znaczniki zajmują tylko tyle miejsca ile potrzebują i nie tworzą domyślnie "nowej linii". Są "rozpychane" przez swoją zawartość, która determinuje ich wielkość (głównie szerokość).

Np:

• b;

• i;

• cite;

• em;

• strong;

• a;

• br;

• img;

• q;

Warto jeszcze wspomnieć, iż elementy blokowe mogą zawierać kolejne elementy blokowe, liniowe lub tekst. Natomiast elementy liniowe generalnie powinny zawierać tylko dane lub ewentualnie kolejne elementy liniowe. Element liniowy nie może zawierać elementu blokowego.

Inline-block

Dla znaczników inline nie działają niektóre właściwości CSS, np. nadawanie wysokości takim elementom. Ale np. elementom blokowym można zmieniać rozmiary.

Dlatego jeśli chcemy aby elementy wyświetlały się w jednej linii (cecha 'inline'), a jednocześnie chcemy nadać im wysokość (cecha 'block'), to aby to osiągnąć możemy użyć w CSS dla

display

właściwości

inline-block

.

PS. Inaczej mówiąc, dla elementów liniowych nie działają wszystkie własności

box-model

(wysokości, paddingi, marginesy), więc czasem pomaga "mix"

inline

i

block

w postaci

inline-block

:)

none: This makes the element and its content disappear from the page entirely!

Ukrywanie elementów

Czasem pojawia się potrzeba ukrycia danego elementu (np. po to, aby był widoczny dopiero po wykonaniu jakiejś akcji). Podstawowe rozwiązanie można stworzyć w czystym CSS, zaś do bardziej rozbudowanych opcji wykorzystujemy JavaScript (którego nauczymy Cię w przyszłości).

Element można schować na 2 sposoby, za pomocą odpowiednich właściwości CSS:

-

display: none;

sprawia, że element nie jest wyświetlany i nie zajmuje miejsca w układzie strony,

-

visibility: hidden;

w tym przypadku element jest niewidoczny ale zachowuje się tak jakby cały czas był w danym miejscu (domyślna wartość dla każdego znacznika HTML to

visibility: visible;

).