Elementy liniowe i blokowe oraz właściwość display
Last updated
Was this helpful?
Last updated
Was this helpful?
W poprzednich rozdziałach poznaliście dwa generyczne tagi HTML: <div> oraz <span>. Zapewne udało się Wam już użyć ich w swoim kodzie. Skąd wzięła się potrzeba wprowadzania aż dwóch rodzajów domyślnych znaczników? Zostało to już krótko wspomniane: <div> odnosi się do elementów, które mają być wyświetlane jako blokowe, natomiast <span> zwykle jest używany dla elementów liniowych.
Elementy blokowe to elementy, które mają być wyświetlane jako bloki.
Jeśli nie określimy jego szerokości wprost, każdy blok domyślnie będzie zajmował 100% szerokości swojego rodzica.
Możemy określić jego marginesy oraz wypełnienie (padding).
Każdy element blokowy umieszczany jest pod poprzedzającym elementem, a element następny w kolejności również umieszczany jest pod spodem. Przypomina to złamanie linii w tekście.
Przykładami elementów HTML, które przez przeglądarkę są domyślnie wyświetlane jako blokowe, to wspomniany już <div>, ale też <p>, <header>, <section>, <nav>, <footer>, <article>, <form>, <ul>, <ol> oraz nagłówki, np. <h1>.
Elementy liniowe to takie, które zachowują się jak linie tekstu, czyli innymi słowy "płyną" razem z tekstem.
Nie można określić im wymiarów za pomocą właściwości width i height.
Nie można nadwać im górnych (margin-top), ani dolnych (margin-bottom) marginesów. Nadanie margin-left lub margin-right oraz wypełnień jednak w ich przypadku zadziała.
Hipster cornhole celiac kickstarter asymmetrical cred meggings. Retro pitchfork semiotics you probably haven't heard of them, thundercats occupy raw denim DIY.
Przykładowe elementy liniowe, które już udało nam się poznać to <span> oraz <a>.
displayKażdy z elementów HTML posiada swój domyślny rodzaj zachowania, jednak można w bardzo łatwy sposób go zmienić i sprawić, żeby np. <div> zaczął zachowywać się jak element liniowy.
Poznajmy cztery używane zdecydowanie najczęściej:
display: none – za pomocą którego możemy ukryć nasz element.
display: inline – sprawia, że element będzie wyświetlany jako element liniowy.
display: block – element zostanie wyświetlony jako element blokowy.
display: inline-block – łączy cechy elementów liniowych i blokowych. Za jego pomocą możemy sprawić, że będzie możliwe nadanie naszemu elementowi wymiarów i wszystkich marginesów, a także nie nastąpi po nim przejście do kolejnej linii.
Poniżej podsumowujemy w tabeli cechy elementów liniowych, blokowych oraz liniowo-blokowych:
Prawe i lewe marginesy
Górne i dolne marginesy
Możliwość ustawienia width i height
Wymuszenie złamania linii za elementem
vertical-align
inline
✔
✘
✘
✘
✔
block
✔
✔
✔
✔
✘
inline-block
✔
✔
✔
✘
✔
Biorąc pod uwagę, że elementy liniowe zachowują się podobnie, jak linie tekstu, można określać ich wyrównanie w pionie za pomocą właściwości vertical-align. Zachowanie zostało bardzo przejrzyście wytłumaczone w .
Warto w tym momencie wspomnieć, że istnieją elementy, których domyślne zachowanie nieco różni się od blokowych i liniowych. Można powiedzieć, że łączą w sobie ich wybrane cechy. Są to tzw. . Należą do nich m.in. <img>, <input> oraz <select>. Można określać ich wymiary za pomocą właściwości CSS, jednak w przeciwieństwie do elementów blokowych za żadnym z nich nie następuje złamanie linii. Zauważyliście to z pewnością podczas tworzenia formularzy w czystym HTML.
Jak to zrobić? Poznajmy właściwość display, która odpowiada za określanie rodzaju sposobu wyświetlania elementu na stronie. Wartości właściwości display jest i sporo z nich brzmi tajemniczo nawet dla całkiem zaawansowanych deweloperów CSS.