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.
