Elementy blokowe i liniowe na stronie internetowej

Czas czytania: 2 minut

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.

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 i blokowe w języku HTML

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go

%d bloggers like this: