CSS3 - Prikaz (Display)

Prikaz CSS Display svojstva

CSS specifikacija definiše zadanu vrijednost display za sve elemente, npr. element <div> prikazuje se kao blok, dok se element <span> prikazuje redom.


Promjena zadane vrijednosti display

Nadjačavanje zadane vrijednosti display elementa je važna implikacija svojstva display. Na primjer, promjena elementa na nivou redove koji će se prikazati kao element na nivou bloka ili promjena elementa na nivou bloka koji će se prikazati kao element na nivou reda.

Sljedeći dio opisuje najčešće korištene vrijednosti CSS svojstva display.


Prikaz (Display) bloka

Vrijednost bloka svojstva display prisiljava element da se ponaša kao element na nivou bloka, poput elementa <div> ili <p>. Pravila stila u sljedećem primjeru prikazuju elemente <span> i <a> kao elemente na nivou bloka: 

span {
    display: block;
}
a {
    display: block;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS display</title>
  <style>
    span {
        display: block;
        background: #F0E68C;
    }
    a {
        display: block;
        background: #90EE90;
    }
  </style>
</head>
<body>
  <p>
    <a href="https://www.ittutorijali.net/" target="_blank">Posjeti sajt IT TUTORIJALI</a>
    <br>
    <span>Ovaj element raspona generiše blok-okvir.</span>
  </p>
</body>
</html>

Display Inline

Vrijednost inline svojstva display uzrokuje da se element ponaša kao da je element u liniji, poput <span> ili <a> elementa. Pravila stila u sljedećem primjeru prikazuju elemente <p> i <li> kao elemente u liniji: 

p {
    display: inline;
}
ul li {
    display: inline;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS display</title>
  <style>
    p {
        display: inline;
        background: #8FBC8F;
        padding: 10px;
    }
    ul li {
        display: inline;
        margin: 10px;
    }
  </style>
</head>
<body>
  <p>Ovaj element pasusa generiše unutarašnji okvir.</p>
  <ul>
    <li>Tačka 1</li>
    <li>Tačka 2</li>
    <li>Tačka 3</li>
    <li>Tačka 4</li>
    <li>Tačka 5</li>
  </ul>
</body>
</html>

Display Inline-Block - Prikaz ugrađenog bloka

Vrijednost inline-block svojstva display uzrokuje da element generiše blok-okvir koji će se stopiti sa okolnim sadržajem, tj. u istom redu kao i susjedni sadržaj. Sljedeća pravila stila prikazuju elemente <div> i <span> kao inline-block: 

div {
    display: inline-block;
}
span {
    display: inline-block;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS display</title>
  <style>
    div {
        display: inline-block;
        background: #90EE90;
        padding: 10px;
    }
    span {
        display: inline-block;        
        background: #F08080;
        padding: 10px;
    }
  </style>
</head>
<body>
  <div>
    <span>Ovaj element raspona i njegov nadređeni div element generišu okvir s inline-block.</span>
  </div>
</body>
</html>

Display None - Ne prikazuj ništa

Vrijednost none jednostavno uzrokuje da element uopšte ne generiše okvire. Podređeni elementi takođe ne generišu nikakve okvire, čak i ako je njihovo svojstvo display postavljeno na nešto drugo, a ne na nijedno. Dokument se prikazuje kao da element ne postoji u stablu dokumenata. 

h1 {
    display: none;
}
p {
    display: none;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS display</title>
  <style>
    h1 {
        display: none;
    }
  </style>
</head>
<body>
    <h1>IT TUTORIJALI!</h1>
    <p>Prikaz <code>:none</code> jednostavno uzrokuje da element uopšte ne generiše okvire.</p>  
</body>
</html>