Wysokość i szerokość CSS

Szerokość tego elementu wynosi 100 procent.

CSS ustawianie wysokości i szerokości

height i width Atrybut służy do ustawiania wysokości i szerokości elementu.

Atrybuty height i width nie obejmują wewnętrznych marginesów, krawędzi ani zewnętrznych marginesów. Ustawiają one wysokość lub szerokość obszaru wewnętrznego marginesów, krawędzi i zewnętrznych marginesów.

Wartości wysokości i szerokości CSS

height i width Atrybut może mieć następujące wartości:

  • auto - Domyślne. Przeglądarka oblicza wysokość i szerokość.
  • length - Definiuje wysokość/szerokość jako wartość długości (np. px, cm itp.).
  • % - Definiuje wysokość/szerokość jako procent zawartości bloku.
  • initial - Ustawia wysokość/szerokość na wartość domyślną.
  • inherit - Inherytuje wysokość/szerokość od wartości rodzica.

CSS przykłady wysokości i szerokości

Wysokość tego elementu wynosi 200 pikseli, a szerokość 50%

Przykład

Ustaw wysokość i szerokość <div> elementu:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Spróbuj sam

Wysokość tego elementu wynosi 100 pikseli, a szerokość 500 pikseli.

Przykład

Ustaw wysokość i szerokość innego <div> elementu:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Spróbuj sam

Uwaga:Pamiętaj:height i width Atrybut nie obejmuje wewnętrznych marginesów, krawędzi ani zewnętrznych marginesów! Ustawia on wysokość/szerokość obszaru wewnętrznego marginesów, krawędzi i zewnętrznych marginesów!

Ustawianie max-width

max-width Atrybut służy do ustawiania maksymalnej szerokości elementu.

Można指定最大宽度（最大宽度）的长度值（例如 px、cm 等）或包含块的 procentowy（％），也可以将其设置为 none（domyślna wartość. Oznacza to, że nie ma maksymalnej szerokości).

Kiedy okno przeglądarki jest mniejsze niż szerokość elementu (500px), występuje poprzedni <div> problemów. Następnie przeglądarka doda poziomą paskę przewijania do strony.

W tym przypadku użyj max-width Może poprawić sposób, w jaki przeglądarka radzi sobie z małymi oknami.

Wskazówka:Przeciągnij okno przeglądarki do szerokości mniejszej niż 500px, aby zobaczyć różnicę między dwoma div!

Wysokość tego elementu wynosi 100 pikseli, a maksymalna szerokość 500 pikseli.

Wysokość tego elementu wynosi 100 pikseli, a maksymalna szerokość 500 pikseli.

Uwaga:max-width Wartość atrybutu zastąpi width（szerokość).

Przykład

Wysokość tego <div> elementu wynosi 100 pikseli, a maksymalna szerokość 500 pikseli:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Spróbuj sam

Więcej przykładów

Ustawianie wysokości i szerokości elementu
Ten przykład pokazuje, jak ustawić wysokość i szerokość różnych elementów.
Ustawianie wysokości i szerokości obrazu za pomocą procentu
Ten przykład pokazuje, jak ustawić wysokość i szerokość obrazu za pomocą wartości procentowych.
Ustawianie minimalnej i maksymalnej szerokości elementu
Ten przykład pokazuje, jak ustawić minimalną i maksymalną szerokość elementu za pomocą wartości pikseli.
Ustawianie minimalnej i maksymalnej wysokości elementu
Ten przykład pokazuje, jak ustawić minimalną i maksymalną wysokość elementu za pomocą wartości pikseli.

Ustawianie wymiarów CSS

Właściwość Opis
height Ustawianie wysokości elementu.
max-height Ustawianie maksymalnej wysokości elementu.
max-width Ustawianie maksymalnej szerokości elementu.
min-height Ustawianie minimalnej wysokości elementu.
min-width Ustawianie minimalnej szerokości elementu.
width Ustawianie szerokości elementu.