width

Właściwość widthCSS ustawia szerokość elementu. Domyślnie ustawia szerokość obszaru zawartości , ale jeśli box-sizing jest ustawione na border-box, ustawia szerokość obszaru border .

Właściwości min-width (en-US) i max-width (en-US) przesłaniają width.

Składnia

/ * <length> wartości * /
szerokość: 300px;
szerokość: 25em;

/ * <wartość procentowa> * /
szerokość: 75%;

/ * Wartości słów kluczowych * /
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

Właściwość width przyjmuje wartości:

Wartości

<length> (en-US)
Ustala absolutną wartość szerokości.
<percentage> (en-US)
Określa szerokość jako procentową wartość względem szerokości obejmującego bloku. Jeśli szerokość bloku obejmującego zależy od szerokości elementu, układ końcowy jest niezdefiniowany.
border-box This is an experimental API that should not be used in production code.
Jeśli występuje, wartość <length> (en-US) lub <percentage> (en-US) są aplikowane do obszaru border elementu.
content-box This is an experimental API that should not be used in production code.
Jeśli występuje, wartość <length> (en-US) lub <percentage> (en-US) jest aplikowana do obszaru zawartości elementu.
auto
Przeglądarka sama wylicza i wybiera szerokość elementu.
fill This is an experimental API that should not be used in production code.
Używa liniowej wielkości fill-available lub blokowej wielkości fill-available, odpowiednio do trybu pisania (writing mode).
max-content This is an experimental API that should not be used in production code.
Naturalna preferowana szerokość zawartości (gdy nie zostanie zastosowane miękkie zawijanie soft wrap).
min-content This is an experimental API that should not be used in production code.
Naturalna minimalna szerokość zawartości (gdy zastosowane zostanie miękkie zawijanie soft wrap).
available This is an experimental API that should not be used in production code.
Dostępna szerokość - blok obejmujący minus poziome marginesy, border i padding.
fit-content This is an experimental API that should not be used in production code.
Większa z wartości:
  • naturalna minimalna szerokości (min-content)
  • mniejsza z wartości: naturalna preferowana szerokość (max-content) i dostępna szerokość (available)

Formalna składnia

auto | (en-US) <length> (en-US) | (en-US) <percentage> (en-US) | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)

where
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)

Examples

Domyślna szerokość

p.goldie {
  background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>

Piksele i emy

.px_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

Procentowo

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">Width in percentage</div>

max-content

p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

Dostępność

Upewnij się, że elementy z ustaloną szerokością width nie są przycinane ani nie zasłaniają pozostałej zawartości, kiedy strona jest przybliżana (zoom) aby zwiększyć rozmiar tekstu. 

Specyfikacje

Specifikacja Status Komentarz
CSS Basic Box Model
The definition of 'width' in that specification.
Candidate Recommendation Dodanie słów kluczowych max-content, min-content, available, fit-content, border-box, content-box.
CSS Transitions
The definition of 'width' in that specification.
Working Draft Dodanie width jako animowanego.
CSS Level 2 (Revision 1)
The definition of 'width' in that specification.
Recommendation Doprecyzowanie  do jakich elementów własność jest stosowana.
CSS Level 1
The definition of 'width' in that specification.
Recommendation Oryginalna definicja.
Wartość początkowaauto
Stosowana doall elements but non-replaced inline elements, table rows, and row groups
Dziedziczonano
Percentagesrefer to the width of the containing block
Wartość wyliczonaa percentage or auto or the absolute length
Animation typea length, percentage or calc();

Działanie w przeglądarkach

BCD tables only load in the browser

Zobacz też