Jak korzystać z inline-block w CSS3?

By /

CSS

W tej lekcji omówimy, jak używać właściwości display: inline-block w CSS3, aby tworzyć elastyczne i responsywne układy stron internetowych. Właściwość inline-block łączy w sobie cechy dwóch innych wartości właściwości display: inline i block, oferując tym samym większą kontrolę nad układem elementów bez konieczności stosowania zewnętrznych ramek czy zagnieżdżenia.

Co to jest inline-block?

Właściwość display: inline-block sprawia, że element zachowuje się jak element blokowy, co oznacza, że możemy ustawić jego wysokość i szerokość, ale jednocześnie element jest traktowany jak element liniowy, co pozwala mu znajdować się w linii z innymi elementami. Jest to szczególnie przydatne, gdy chcemy, aby elementy, takie jak przyciski lub linki menu, były rozmieszczone w jednej linii, ale zachowały możliwość kontrolowania ich wymiarów.

Przykład zastosowania inline-block

W poniższym przykładzie stworzymy prosty układ z trzema kwadratowymi divami, które będą umieszczone obok siebie w jednym rzędzie dzięki wykorzystaniu właściwości inline-block.

Kod HTML i CSS w jednym pliku
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład zastosowania inline-block</title>
    <style>
        /* Styl dla kontenera */
        .container {
            text-align: center; /* Centrowanie dzieci */
        }

        /* Styl dla elementów, które mają być w linii */
        .inline-block-element {
            display: inline-block; /* Kluczowe zastosowanie */
            width: 100px; /* Szerokość każdego kwadratu */
            height: 100px; /* Wysokość każdego kwadratu */
            margin: 10px; /* Odstępy między elementami */
            background-color: #3498db; /* Kolor tła */
        }
    </style>
</head>
<body>

<div class="container">
    <div class="inline-block-element"></div>
    <div class="inline-block-element"></div>
    <div class="inline-block-element"></div>
</div>

</body>
</html>

W powyższym przykładzie zdefiniowaliśmy trzy divy z klasą .inline-block-element, które dzięki właściwości display: inline-block; będą wyświetlane jeden obok drugiego w jednym rzędzie. Ustawiliśmy również szerokość, wysokość i kolor tła dla każdego z nich, aby uwidocznić ich blokowy charakter, pomimo że są wyświetlane w linii.

Podsumowanie

Właściwość display: inline-block w CSS3 oferuje wygodny sposób na łączenie cech elementów blokowych i liniowych, umożliwiając tworzenie responsywnych i elastycznych układów bez konieczności stosowania złożonych technik CSS. Dzięki tej właściwości, możemy łatwo kontrolować układ i wymiary elementów, jednocześnie zachowując ich liniowe rozmieszczenie, co jest szczególnie przydatne w tworzeniu menu nawigacyjnego, galerii obrazów czy przycisków akcji. Użycie inline-block otwiera nowe możliwości w projektowaniu stron internetowych, czyniąc CSS jeszcze bardziej potężnym narzędziem w rękach webdeveloperów.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top