Właściwości display
Właściwości display oferują szeroką gamę wartości, takich jak block, inline, inline-block, flex, grid czy table, które determinują zachowanie elementów na stronie. Dzięki wykorzystaniu właściwości display otrzymujemy możliwość tworzenia zaawansowanych układów, które przystosowują się do różnych rozdzielczości ekranów i urządzeń, zapewniając użytkownikom niezrównane wrażenia wizualne. Wykorzystanie tej właściwości w CSS pozwala również na efektywniejsze zarządzanie kodem, co skraca czas potrzebny na utrzymanie i aktualizację stron internetowych.
Block
Elementy z właściwością display
ustawioną na block
zawsze zaczynają się od nowej linii i zajmują całą dostępną szerokość kontenera. Elementy blokowe są stosowane, gdy chcemy wydzielić blok zawartości, który oddziela się od sąsiednich elementów. Typowe elementy blokowe to <div>
, <p>
i <h1>
do <h6>
.
Przykład użycia wartości block
:
div {
display: block;
}
W powyższym przykładzie, wszystkie elementy <div>
na stronie internetowej zostaną ustawione jako elementy block
, co sprawia, że zajmują całą dostępną szerokość linii i zaczynają się od nowej linii.
Inline
Elementy z właściwością display
ustawioną na inline
pojawiają się w linii z tekstem i nie zaczynają się od nowej linii. Szerokość elementów inline jest ograniczona do szerokości ich zawartości, a wysokość do wysokości linii, w której się znajdują. Są one używane do formatowania tekstu lub umieszczania małych elementów obok siebie. Przykłady elementów inline to <span>
, <a>
i <img>
.
Przykład użycia wartości inline
:
span {
display: inline;
}
W powyższym przykładzie, wszystkie elementy <span>
na stronie internetowej zostaną ustawione jako elementy inline
, co pozwala na ich rozmieszczenie wewnątrz linii tekstu bez wprowadzania przerw.
Inline-block
Elementy z właściwością display
ustawioną na inline-block
mają cechy zarówno elementów blokowych, jak i inline. Są umieszczane w linii z tekstem, ale można im również ustawić szerokość i wysokość. Pozwala to na tworzenie elementów, które zachowują się podobnie do elementów inline, ale mają większą kontrolę nad ich rozmiarem.
Przykład użycia wartości inline-block
:
button {
display: inline-block;
}
W powyższym przykładzie, wszystkie przyciski <button>
na stronie internetowej zostaną ustawione jako elementy inline-block
, co pozwala na łatwiejsze formatowanie i rozmieszczenie w linii.
None
Wartość none
sprawia, że element nie jest wyświetlany na stronie. Jest to przydatne, gdy chcemy ukryć pewne elementy, na przykład w zależności od rozdzielczości ekranu, stanu aplikacji lub interakcji użytkownika. Elementy z właściwością display
ustawioną na none
są całkowicie pomijane podczas renderowania strony, co oznacza, że nie zajmują żadnej przestrzeni ani nie wpływają na pozycjonowanie innych elementów.
Przykład użycia wartości none
:
.hidden {
display: none;
}
W powyższym przykładzie, wszystkie elementy z klasą hidden
zostaną ukryte na stronie internetowej poprzez ustawienie wartości właściwości display
na none
.
Warto zapamiętać
Zrozumienie różnych wartości właściwości display
jest kluczowe dla tworzenia responsywnych i elastycznych układów stron internetowych. Właściwości display pozwalają na kontrolowanie przepływu elementów i ich interakcji względem siebie oraz na ukrywanie i pokazywanie zawartości zgodnie z potrzebami projektu.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.