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:

<predata-previewers=””>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:

<predata-previewers=””>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:

<predata-previewers=””>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:

<predata-previewers=””>.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
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. Chcesz dowiedzieć się więcej o mnie? Zajrzyj na mateuszturek.pl

Artykuły: 190