Właściwości wyświetlania CSS: block, inline, i inline-block – i jak je odróżnić

Przeglądarki internetowe traktują każdy element jako rodzaj pudełka. Jednakże CSS posiada dwa różne typy pudełek – blokowe i inline.

Element blokowy zawsze zaczyna się w nowej linii i wypełnia poziomą przestrzeń po lewej i prawej stronie. Możesz dodać marginesy i wypełnienia na wszystkich czterech stronach dowolnego elementu blokowego – górnej, prawej, lewej i dolnej.

Pewnymi przykładami elementów blokowych są znaczniki <div> i <p>. Jak pokazano poniżej, dodałem również zielony padding po wszystkich czterech stronach każdego elementu blokowego.

Elementy inline

Elementy inline nie zaczynają się w nowej linii, pojawiają się w tej samej linii co treść i znaczniki obok nich. Niektóre przykłady elementów inline to <span><strong>, oraz znaczniki <img>.

Jeśli chodzi o marginesy i wypełnienia, przeglądarki traktują elementy inline inaczej. Możesz dodać miejsce po lewej i prawej stronie elementu inline, ale nie możesz dodać wysokości do górnego lub dolnego paddingu lub marginesu elementu inline.

Elementy inline mogą pojawiać się wewnątrz elementów blokowych, jak pokazano poniżej. Dodałem biały padding po lewej i prawej stronie każdego elementu inline.

Inline-.Block

Elementy inline-block są podobne do elementów inline, z tym wyjątkiem, że mogą mieć padding i marginesy dodane z każdej strony. Będziesz musiał zadeklarować display: inline-block w swoim kodzie CSS.

Jednym z powszechnych zastosowań inline-block jest tworzenie linków nawigacyjnych w poziomie, jak pokazano poniżej. Stworzyłem poziome menu nawigacyjne z pomarańczowym kolorem tła.

Istnieje tam również wiele innych właściwości wyświetlacza, które można sprawdzić za pośrednictwem dokumentów MDN.

-D.