W tej lekcji dowiesz się, jak zmienić domyślą szerokość i wysokośćelementów, za pomocą stylów CSS.
Ustawianie wysokości i szerokości za pomocą CSS
Do ustawiania wysokości i szerokości w języku CSS wykorzystuje się włąściwości height i width.
Ustawiona wartość wysokości i szerokości nie wlicza marginesów, marginesów wewnętrznych i obramowań.
height i width ustawia rozmiar kontenera nie wliczając marginesów (wewnętrzych i zewnętrzych) oraz obramowań.
Dokładniej zostanie to wyjaśnione w kolejnej lekcji, w której omówimy model pudełkowy.
CSS height i width - wartości
Zarówno właściwość height i width może przyjmować wartości w następujących jednostkach
-
auto- jest to wartość domyślna. W tym wypadku przeglądarka zarządza wysokością i szerokością -
długość- definiowanie height/width w pixelach, cenetymetrach itp. -
%- definiuje szerokość lub wysokość proporcjonalnie do elementu nadrzędnego -
initial- resetuje height/width na wartość domyślną -
inherit- szerokość/wysokość zostanie odziedziczona po elemencie nadrzędnym
Poniżej przykład, gdzie element div zajmuje całą szerokość ekranu.
Warto zauważyć, że jeżeli w poniższym przykładzie usuniesz styl ustawiający szerokość na 100%, to nic się nie zmieni.
Jest tak ponieważ, element div jest elementem blokowym, a one domyślnie zajmują 100% szerokości.
Zmiana szerokości i wysokości w CSS
Poniższy przykład pokazuje, jak zmienić szerokość i wysokość elementu div.
CSS - max-width
W niektórych przypadkach, zamiast width, może lepiej sprawdzić się właściwość max-width.
Dla przykładu, jeżeli ustawisz właściwość width na 500px, to jeżeli zmniejszysz okno przeglądarki
lub otworzysz stronę na komórce, to na dole strony pojawi się pasek przeijania.
Jeżeli natomiast wykorzystasz właściwość max-width, to pasek przewijania się nie pojawi, ponieważ element zajmie maksymalnie 500px
lub mniej - czyli dostosuje się do maksymalnej szerokości ekranu urządzenia.
max-width może przyjmować długość w pikselach, centymetrach, itp. Może ona być rónież zdefiniowana procentowo, lub ustawiona na
none. Wartość none jest domyśną właściwością dla max-width.
W poniższym przykłądzie możesz eksperymentować z ustawianiem width i max-width. Aby zobaczyć różnię,
może być konieczne zmniejszenie okna przeglądarki.