Wyświetlanie elementów

Display jest jedną z najważniejszych właściwości w CSS, ponieważ kontroluje sposób, w jaki elementy HTML są wyświetlane na stronie. Wartości "display" pozwalają na precyzyjne kontrolowanie układu elementów na stronie.

Właściwość block Ustawienie bloku na stronie:

										
div {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}

										
<div style="display: block;">

  <h1>Tytuł</h1>
  <p>To jest przykładowy tekst.</p>

</div>

Właściwość inline Ustawienie elementu jako inline:

										
span {
  display: inline;
}

										

<p>To <span>tekst</span> z elementem inline.</p>

Właściwość inline-block Ustawienie elementu jako inline-block:

										
button {
  display: inline-block;
  margin: 10px;
  padding: 10px;
}

										
<div>
  <button>Przycisk 1</button>
  <button>Przycisk 2</button>
  <button>Przycisk 3</button>
</div>

Właściwość flex Ustawienie elementu jako kontenera flex:

										
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

										
<div class="container">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

Właściwość none Ukrycie elementu:

										

<div style="display: none;">Ten element nie jest widoczny</div>

Visibility

Wartość "visible" oznacza, że element jest widoczny na stronie. Wartość "hidden" oznacza, że element jest ukryty, ale pozostaje w miejscu, w którym jest umieszczony, więc pozostawia swoje miejsce, a inne elementy na stronie są przesunięte w to miejsce.

visibility Ukrycie oraz Pokazanie elementu:

Html

										
<img id="element" src="/img/podroz3.jpg" alt="" style="visibility: visible;" >

<button onclick="document.getElementById('element').style.visibility = 'hidden'">Ukryj element</button>

<button onclick="document.getElementById('element').style.visibility = 'visible'">Pokaż element</button>