Elementy HTML, które umieszczamy na stronie internetowej podzielić można na kilka grup. Jedną z nich pod względem zajmowanej przestrzeni są elementy liniowe i blokowe.
Zasadnicza różnica między tymi elementami polega na tym, że elementy:
- blokowe zajmują całą szerokość strony (lub elementu, w którym się znajdują), może być tylko jeden w linii
- linowe z kolei zajmują tylko przestrzeń wokół danego obiektu, może ich być więc kilka w jednej linii
Co znajdziesz w tym wpisie
Elementy blokowe
Jak sama nazwa wskazuje elementy te mają być wyświetlane jako bloki. Wykorzystywane są więc do budowy struktury witryn internetowych.
- jeśli samodzielnie nie określimy ich szerokości wyniesie ona 100% nadrzędnego elementu.
- elementy te ustawiają domyślnie się jeden pod drugim
- możemy bez wprowadzania zmian w CSS dodawać tym elementom
- margin (margines)
- padding (wypełnienie)
Przykładowe elementy zaliczane do blokowych to:
<div> <p> <h1> <h2><h3>..<h6> <ol> <li> <table>Elementy liniowe
Zupełnie inaczej zachowują się elementy liniowe, które jak gdyby przyklejone są do zawartości treści. Domyślnie cechują się one tym, że:
- nie można im dodać marginesu dolnego i górnego (margin-top, margin-bottom), można jednak dodać marginesy boczne (margin-left, margin-right)
- ich zachowanie dość mocno przypomina tekst można więc użyć na nich vertical-align (czyli wyrównania tekstu)
- nie możemy nadawać im szerokości i wysokości
Przykładowe elementy liniowe to:
<a> <b> <u> <i> <span>Co decyduje o tym, że element HTML jest blokowy lub liniowy?
O tym czy konkretny element HTML będzie blokowy lub linowy odpowiada właściwość CSS „display„. Z jej pomocą możemy więc samodzielnie zmieniać domyślenie ustawienia na naszej stronie. Właściwość ta przyjmuje następujące wartości:
display: none– ukrycie elementu na stronie, nie będzie on się tylko wyświetlał w kodzie będzie nadal dostępny.display: inline– sprawia, że element wyświetla się jako element liniowy.display: block– element wyświetla się jako element blokowy.display: inline-block– ustawienie to łączy ze sobą cechy blokowe i liniowe. Stosowane jest np. do stawiania kilku bloków obok siebie (np. elementów menu).
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.