Elementy blokowe i liniowe na stronie internetowej

Elementy HTML, które umieszczamy na stronie internetowej podzielić można na kilka grup. Jedną z nich pod względem zajmowanej przestrzeni są elementy liniowe i blokowe.

Elementy blokowe

Zasadnicza różnica między tymi elementami polega na tym, że elementy:

• blokowe zajmują całą szerokość strony (lub elementu, w którym się znajdują), może być tylko jeden w linii
• linowe z kolei zajmują tylko przestrzeń wokół danego obiektu, może ich być więc kilka w jednej linii

Elementy blokowe

Jak sama nazwa wskazuje elementy te mają być wyświetlane jako bloki. Wykorzystywane są więc do budowy struktury witryn internetowych.

• jeśli samodzielnie nie określimy ich szerokości wyniesie ona 100% nadrzędnego elementu.
• elementy te ustawiają domyślnie się jeden pod drugim
• możemy bez wprowadzania zmian w CSS dodawać tym elementom
  • margin (margines)
  • padding (wypełnienie)

Przykładowe elementy zaliczane do blokowych to:

<div> <p> <h1> <h2><h3>..<h6> <ol> <li> <table>

Elementy liniowe

Zupełnie inaczej zachowują się elementy liniowe, które jak gdyby przyklejone są do zawartości treści. Domyślnie cechują się one tym, że:

• nie można im dodać marginesu dolnego i górnego (margin-top, margin-bottom), można jednak dodać marginesy boczne (margin-left, margin-right)
• ich zachowanie dość mocno przypomina tekst można więc użyć na nich vertical-align (czyli wyrównania tekstu)
• nie możemy nadawać im szerokości i wysokości

Przykładowe elementy liniowe to:

<a> <b> <u> <i> <span>

Co decyduje o tym, że element HTML jest blokowy lub liniowy?

O tym czy konkretny element HTML będzie blokowy lub linowy odpowiada właściwość CSS „display„. Z jej pomocą możemy więc samodzielnie zmieniać domyślenie ustawienia na naszej stronie. Właściwość ta przyjmuje następujące wartości:

• display: none – ukrycie elementu na stronie, nie będzie on się tylko wyświetlał w kodzie będzie nadal dostępny.
• display: inline – sprawia, że element wyświetla się jako element liniowy.
• display: block – element wyświetla się jako element blokowy.
• display: inline-block – ustawienie to łączy ze sobą cechy blokowe i liniowe. Stosowane jest np. do stawiania kilku bloków obok siebie (np. elementów menu).