Wartości display: blok, w linii i ukrycie

CSS: odstępy, ramki i układ - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Właściwość display decyduje, jak element układa się na stronie. block (np. div, p, li) zajmuje całą szerokość i zaczyna się w nowej linii. inline (np. span, a) płynie w tekście i ignoruje width. inline-block stoi w linii jak tekst, ale przyjmuje szerokość i odstępy jak blok - idealne na kafelki menu. display: none całkowicie chowa element. Zmień wartość dla klasy ukryty na block i zobacz, co się pojawi.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Display</title>
  <style>
    .kafelki li {
      display: inline-block;
      width: 100px;
      padding: 10px;
      margin: 5px;
      background-color: lightblue;
      text-align: center;
    }
    .blok {
      display: block;
      background-color: lightpink;
    }
    .ukryty {
      display: none;
    }
  </style>
</head>
<body>
  <p>Elementy li zamienione na kafelki w jednej linii:</p>
  <ul class="kafelki">
    <li>Start</li>
    <li>Galeria</li>
    <li>Kontakt</li>
  </ul>
  <p>Słowo <span class="blok">blokowe</span> rozbiło akapit na części.</p>
  <p class="ukryty">Tego akapitu nie widać.</p>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.