Elementy wyświetlane w linii lub w bloku

Zapoznając się z właściwościami CSS możemy dostrzec informacje o typie elementu HTML, do którego możemy dodać daną właściwość CSS. Najczęściej jest to element wyświetlany w bloku bądź dowolny element HTML, czasami jest to również element wyświetlany w linii.

Jeżeli daną właściwość CSS możemy dodać tylko do elementów wyświetlanych w bloku, to oznacza to, że właściwość tą nie powinno się dodawać do elementów wyświetlanych w linii, ponieważ może ona nie dać pożądanych efektów. Dlatego w tej części kursu CSS poznamy różnice między tymi dwoma typami elementu HTML.

W realnym świecie, gdy chcemy ułożyć kilka przedmiotów obok siebie lub pod sobą, to nie mamy z tym większego problemu.

W świecie wirtualnym, w języku HTML oraz CSS, sprawa wygląda nieco bardziej skomplikowanie.


O elementach, które są domyślnie wyświetlane jeden pod drugim, możemy powiedzieć, że są to elementy wyświetlane w bloku. Takimi przykładowymi elementami są: div, p, h1, h2, h3.

O elementach, które są domyślnie wyświetlane obok siebie, możemy powiedzieć, że są to elementy wyświetlane w linii. Takimi przykładowymi elementami są: span, b, strong, i, a, u. Służą one w większości do formatowania wyglądu części tekstu.

Pod spodem został przedstawiony kod dokumentu HTML, którym zajmiemy się w tej części kursu CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        background-color:black;
      }

      #drugi {
        line-height:2em;
      }

      p {
        padding:15px;
        background-color:lightblue;
      }

      span {
        border:3px solid red;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      <p>to jest przykładowy element - p - który jest elementem blokowym</p>
      <p>to jest kolejny przykładowy element - p - który jest elementem blokowym</p>
    </div>

    <div id="drugi">
      <p>ten element HTML, który jest elementem blokowym - p - <span>zawiera w sobie jeden element - span - który jest elementem liniowym</span></p>
    </div>

  </body>
</html>

A o to rezultat jaki ujrzymy po wyświetleniu danego dokumentu HTML w oknie przeglądarki internetowej:

to jest przykładowy element - p - który jest elementem blokowym

to jest kolejny przykładowy element - p - który jest elementem blokowym

ten element HTML, który jest elementem blokowym - p - zawiera w sobie jeden element - span - który jest elementem liniowym

Powyżej zostały wyświetlone elementy blokowe div, p oraz jeden element liniowy span. Do wszystkich wspomnianych elementów HTML został dodany różny kolor tła, żebyśmy lepiej mogli zauważyć przestrzeń jaką zajmują dane elementy HTML, w oknie naszej przeglądarki internetowej.

Domyślnie, przestrzeń jaką zajmuje element wyświetlany w linii, czyli w naszym przykładzie element span, jest uzależniona od zawartości jaka się w nim znajdzie, czyli najczęściej od tekstu jaki w nim umieścimy.

Do naszego elementu span, oprócz białego tła, została dodana właściwość border:3px solid red; która odpowiada za dodanie obramowania po każdej stronie danego elementu HTML. Element liniowy w gruncie rzeczy jest traktowany przez przeglądarkę internetową w podobnych kategoriach jak tekst, dlatego też możemy zauważyć, że nasz przykładowy element span został przełamany, ponieważ dany tekst będący zawartością elementu span, nie mieścił się w szerokości elementu rodzica, czyli elementu p.

Wyśrodkowanie elementu liniowego jest możliwe, jeżeli do elementu rodzica, który jest elementem blokowym, zostanie dodana właściwość text-align:center; ponieważ właśnie ta właściwość odpowiada za wyśrodkowanie tekstu w elemencie blokowym HTML. Wyśrodkowaniu ulegną również ewentualne elementy liniowe, które znajdą się w zawartości elementu blokowego.

Całą sytuację możemy zaobserwować poniżej:

to jest przykładowy element - p - który jest elementem blokowym

to jest kolejny przykładowy element - p - który jest elementem blokowym

ten element HTML, który jest elementem blokowym - p - zawiera w sobie jeden element - span - który jest elementem liniowym

Ponadto niektóre właściwości CSS nie oddziałują na elementy wyświetlane w linii. Tymi właściwościami są, np. width oraz height. Właściwość width odpowiada za ustalenie wartości szerokości elementu, natomiast właściwość height odpowiada za ustalenie wartości wysokości elementu.

Czas zająć się elementami wyświetlanymi w bloku.

Przyglądając się naszym elementom div oraz p, możemy zauważyć, że przestrzeń jaką zajmuje element blokowy jest uzależniona od szerokości jego elementu rodzica, dlatego szerokość elementu p (w naszym przykładzie elementy z jasnoniebieskim kolorem tła) jest taka sama jak szerokość jego elementu rodzica, czyli elementu div (w naszym przykładzie elementy z ciemnym kolorem tła).

Oczywiście, szerokość elementów p możemy ustawić na dowolną wartość, dzięki właściwości width. Gdy dodamy do naszych elementów p właściwość width wraz z wartością 50%, to szerokość każdego takiego elementu p będzie wynosiła połowę szerokości ich elementu rodzica.

Cały efekt został zaprezentowany poniżej:

to jest przykładowy element - p - który jest elementem blokowym

to jest kolejny przykładowy element - p - który jest elementem blokowym

ten element HTML, który jest elementem blokowym - p - zawiera w sobie jeden element - span - który jest elementem liniowym

Jeżeli chcielibyśmy wyśrodkować jeden element blokowy w drugim, to należy ustawić wartość auto dla lewego oraz prawego marginesu zewnętrznego danego elementu, który ma zostać wyśrodkowany. W naszym przykładzie należałoby dodać właściwość margin-left:auto; oraz margin-right:auto do elementu p.

W efekcie uzyskamy następujący rezultat:

to jest przykładowy element - p - który jest elementem blokowym

to jest kolejny przykładowy element - p - który jest elementem blokowym

ten element HTML, który jest elementem blokowym - p - zawiera w sobie jeden element - span - który jest elementem liniowym

Kod dokumentu HTML, ze wszystkimi uwzględnionymi zmianami, został przedstawiony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        background-color:black;
      }

      #drugi {
        text-align:center;
        line-height:2em;
      }

      p {
        width:50%;
        margin-left:auto;
        margin-right:auto;
        padding:15px;
        background-color:lightblue;
      }

      span {
        border:3px solid red;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      <p>to jest przykładowy element - p - który jest elementem blokowym</p>
      <p>to jest kolejny przykładowy element - p - który jest elementem blokowym</p>
    </div>
  
    <div id="drugi">
      <p>ten element HTML, który jest elementem blokowym - p - <span>zawiera w sobie jeden element - span - który jest elementem liniowym</span></p>
    </div>

  </body>
</html>

Jeżeli chcielibyśmy wyrównać, któryś z naszych elementów blokowych do prawego boku ich blokowego elementu rodzica, to należy wykorzystać do tego celu właściwość margin-left:auto; oraz margin-right:0;

Przykład:

to jest przykładowy element - p - który jest elementem blokowym

to jest kolejny przykładowy element - p - który jest elementem blokowym

ten element HTML, który jest elementem blokowym - p - zawiera w sobie jeden element - span - który jest elementem liniowym

Zajmiemy się teraz nieco innym układem elementów HTML.

Kod części body dokumentu HTML został umieszczony poniżej:

<body>

  <div>element - div - domyślnie blokowy</div>
  <div>element - div - domyślnie blokowy</div>
  <div>element - div - domyślnie blokowy</div>

  <span>element - span - domyślnie liniowy</span>
  <span>element - span - domyślnie liniowy</span>
  <span>element - span - domyślnie liniowy</span>

  <div>element - div - domyślnie blokowy</div>
  <div>element - div - domyślnie blokowy</div>
  <div>element - div - domyślnie blokowy</div>

  <span>element - span - domyślnie liniowy</span>
  <span>element - span - domyślnie liniowy</span>
  <span>element - span - domyślnie liniowy</span>

</body>

A o to rezultat po wyświetleniu w oknie przeglądarki internetowej:

element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - span - domyślnie liniowy element - span - domyślnie liniowy element - span - domyślnie liniowy
element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - span - domyślnie liniowy element - span - domyślnie liniowy element - span - domyślnie liniowy

Powyżej zostało zaprezentowane kilka elementów div, które domyślnie wyświetlane są w bloku, czyli jeden pod drugim, oraz kilka elementów span, które domyślnie wyświetlane są w linii, czyli jeden obok drugiego, tak jak wyrazy tekstu.

Dzięki istnieniu języka CSS oraz właściwości CSS możemy zmieniać domyślne cechy wyglądu elementów HTML. Tak jest również i w tym przypadku, ponieważ dzięki właściwości display:inline; możemy sprawić, aby elementy blokowe div stały się elementami wyświetlanymi w linii, natomiast, dzięki właściwości display:block; możemy sprawić, że elementy liniowe span staną się elementami wyświetlanymi w bloku.

A o to efekt jaki ujrzymy, po dodaniu wspomnianych właściwości do naszych elementów HTML.

element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - span - domyślnie liniowy element - span - domyślnie liniowy element - span - domyślnie liniowy
element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - div - domyślnie blokowy
element - span - domyślnie liniowy element - span - domyślnie liniowy element - span - domyślnie liniowy

Kod dokumentu HTML został zaprezentowany pod spodem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        display:inline;
        background-color:lightblue;
      }

      span {
        display:block;
        margin:15px 0;
        background-color:red;
      }
    </style>
  </head>

  <body>

    <div>element - div - domyślnie blokowy</div>
    <div>element - div - domyślnie blokowy</div>
    <div>element - div - domyślnie blokowy</div>

    <span>element - span - domyślnie liniowy</span>
    <span>element - span - domyślnie liniowy</span>
    <span>element - span - domyślnie liniowy</span>

    <div>element - div - domyślnie blokowy</div>
    <div>element - div - domyślnie blokowy</div>
    <div>element - div - domyślnie blokowy</div>

    <span>element - span - domyślnie liniowy</span>
    <span>element - span - domyślnie liniowy</span>
    <span>element - span - domyślnie liniowy</span>

  </body>
</html>

Jeżeli chodzi o elementy blokowe, to pozostały nam do poznania jeszcze dwie zależności, które występują między nimi.

Pierwszą zależnością jest fakt, że górne i dolne marginesy zewnętrzne elementów blokowych, które występują bezpośrednio po sobie, nie sumują się.

Przykładowy kod HTML wyjaśni nam to nieco jaśniej:

<body>

  <div style="margin-bottom:50px; background-color:lightblue;">pierwszy element - div - dolny margines zewnętrzny - 50 pikseli</div>
  <div style="margin-top:40px; background-color:lightblue;">drugi element - div - górny margines zewnętrzny - 40 pikseli</div>

</body>

Dla pierwszego elementu div została ustawiona wartość dolnego marginesu zewnętrznego na 50px, natomiast dla drugiego elementu div została ustawiona wartość górnego marginesu zewnętrznego na 40px, jednak w ostateczności, po wyświetleniu tych elementów HTML w oknie przeglądarki internetowej, odległość między nim będzie wynosiła 50px, a nie 90px (przeglądarka internetowa wybierze większą wartość, czyli w tym wypadku 50px jest większe od 40px).

pierwszy element - div - dolny margines zewnętrzny - 50 pikseli
drugi element - div - górny margines zewnętrzny - 40 pikseli

Wspomniana zależność "znika" w momencie gdy blokowy element HTML staje się elementem unoszącym się, czyli takim elementem, do którego została dodana właściwość float:left; lub float:right; Jednak mowa o tym będzie w innej części tego kursu CSS.

Pozostała nam do wyjaśnienia jeszcze jedna zależność, która na początku może wydać się nam dość dziwna. Żeby ją zrozumieć, musimy przyjrzeć się pewnemu kodowi dokumentu HTML oraz elementom HTML, które zostały w nim umieszczone.

Kod dokumentu HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        background-color:gold;
      }

      #rodzic {
        background-color:tomato;
      }

      p {
        margin:30px;
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <div>sąsiedni element - div</div>

    <div id="rodzic">
      <p>przykładowy element - p</p>
    </div>

    <div>sąsiedni element - div</div>

  </body>
</html>

Elementy HTML po wyświetleniu w oknie przeglądarki internetowej prezentują się następująco:

sąsiedni element - div

przykładowy element - p

sąsiedni element - div

Skupimy się na elemencie p, do którego zostały dodane marginesy zewnętrzne o wartości 30px, oraz który został umieszczony w elemencie div#rodzic. Właściwość margin dodaje marginesy zewnętrzne do elementu HTML, a więc element HTML posiadający marginesy zewnętrzne powinien zostać odsunięty o 30 pikseli od każdej strony, która go otacza. Rzeczywiście tak się stało, lecz jego marginesy zewnętrzne odsunęły ten element p od sąsiednich elementów div po górnej i dolnej stronie, a nie od krawędzi jego elementu rodzica, czyli elementu div#rodzic. Dzieje się tak w przypadku gdy element rodzic nie posiada w sobie obramowania lub marginesów wewnętrznych, czyli właściwości border lub właściwości padding.

Gdy do elementu div#rodzic dodamy jakieś przykładowe obramowanie, np. border:1px solid #000; to uzyskamy następujący efekt:

sąsiedni element - div

przykładowy element - p

sąsiedni element - div

Kod dokumentu HTML został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        background-color:gold;
      }

      #rodzic {
        background-color:tomato;
        border:1px solid #000;
      }

      p {
        margin:30px;
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <div>sąsiedni element - div</div>

    <div id="rodzic">
      <p>przykładowy element - p</p>
    </div>

    <div>sąsiedni element - div</div>

  </body>
</html>

W następnej części kursu CSS poznamy kolejne wartości właściwości display.