Właściwość display jest jedną z najważniejszych właściwości, która umożliwia kontrolowanie wyglądu strony.
Właściwość display
Właściwość display definiuje, jak element ma być wyświetlany na stronie.
W tej lekcji dowiesz się jekie wartości, może przyjmować ta właściwość. Najczęściej domyślne wartości jakie przyjmują elementy
display to block lub inline
Elementy blokowe
Elementy blokowe zajmują zawsze całą dostępną przestrzeń. Innymi słowy zajmują one 100% dostępnej szerokości.
Przykłady elementów, które domyślnie są blokowe:
- <div>
- <h1> - <h6>
- <p>
Elementy liniowe
Elementy lioniowe zajmują tylko tyle przestrzeni, ile jest wymagane. Elementy liniowe, nie rozpoczynają się od nowej lini.
Przykłady elementów, które domyślnie są liniowe:
- <span>
- <a>
- <img>
display: none
Właściwość display, jest często ustawiana na wartość none, w celu ukrycia elementu.
Często ustawia się display: none, za pomocą kodu javascript, gdy tymczasowo chcemy ukryć jakiś element.
Więcej szczegółów na temat dynamicznej zmainy stylów, dowiesz się w kolejnym kursie.
Nadpisywanie właściwości display
Domyślna wartość display, może zostć nadpisana za pomocą arkuszy stylów CSS. W poniższym przykładzie,
pokażemy jak sprawić aby elementy listy były wyświetlane w jednej linii.