path: root/files/ru/web/css/width/index.html

---
title: width
slug: Web/CSS/width
translation_of: Web/CSS/width
---
<div>{{CSSRef}}</div>

<p>Свойство CSS <strong><code>width</code></strong> устанавливает ширину элемента. По умолчанию она равняется ширине <a href="/ru/docs/Web/CSS/box_model#content">внутренней области</a>, но если {{cssxref("box-sizing")}} имеет значение <code>border-box</code>, то она будет равняться ширине <a href="/ru/docs/Web/CSS/box_model#border">области рамки</a>.</p>

<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>

<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p>

<p>Свойства {{cssxref("min-width")}} и {{cssxref("max-width")}} перекрывают {{cssxref("width")}}.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush:css no-line-numbers">/* &lt;length&gt; значения */
width: 300px;
width: 25em;

/* &lt;percentage&gt; значения */
width: 75%;

/* Значения-ключевые слова */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* Глобальные значения */
width: inherit;
width: initial;
width: unset;
</pre>

<p>Свойство <code>width</code> указывается как:</p>

<ul>
 <li>одно из следующих ключевых слов: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
 <li><code><a href="#&lt;length>">&lt;length&gt;</a></code> или <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>. За ними так же могут быть указаны одни из следующих ключевых слов: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li>
</ul>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
 <dd>Ширина - фиксированная величина.</dd>
 <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
 <dd>Ширина в процентах - размер относительно ширины родительского блока.</dd>
 <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
 <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к области рамки элемента.</dd>
 <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
 <dd>Если присутствует, то предшествующие {{cssxref("&lt;length&gt;")}} или {{cssxref("&lt;percentage&gt;")}} применяются к внутренней области элемента.</dd>
 <dt><a id="auto" name="auto"><code>auto</code></a></dt>
 <dd>Браузер рассчитает и выберет ширину для указанного элемента.</dd>
 <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
 <dd>Использует <code>fill-available</code> размер строки или <code>fill-available</code> размер блока, в зависимости от способа разметки.</dd>
 <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
 <dd>Внутренняя максимальная предпочтительная ширина.</dd>
 <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
 <dd>Внутренняя минимальная ширина.</dd>
 <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
 <dd>Ширина содержащего блока минус горизонтальные <code>margin</code>, <code><font face="consolas, Liberation Mono, courier, monospace">border</font></code> и <code>padding</code>.</dd>
 <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
 <dd>Наибольшее из:
 <ul>
  <li>внутренняя минимальная ширина</li>
  <li>меньшая из внутренней предпочтительной ширины и доступной ширины</li>
 </ul>
 </dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Примеры">Примеры</h2>

<h3 id="Ширина_по_умолчанию">Ширина по умолчанию</h3>

<pre class="brush:css">p.goldie {
  background: gold;
}</pre>

<pre class="brush:html">&lt;p class="goldie"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>

<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>

<h3 id="Пиксели_и_em">Пиксели и em</h3>

<pre class="brush: css">.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;
}
</pre>

<pre class="brush: html">&lt;div class="px_length"&gt;Ширина в пикселях&lt;/div&gt;
&lt;div class="em_length"&gt;Ширина в em&lt;/div&gt;</pre>

<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>

<h3 id="Проценты">Проценты</h3>

<pre class="brush: css">.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}</pre>

<pre class="brush: html">&lt;div class="percent"&gt;Ширина в процентах&lt;/div&gt;</pre>

<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>

<h3 id="max-content_2">max-content</h3>

<pre class="brush:css;">p.maxgreen {
  background: lightgreen;
  width: intrinsic;           /* Safari/WebKit используют нестандартное имя */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}</pre>

<pre class="brush:html">&lt;p class="maxgreen"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>

<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>

<h3 id="min-content_2">min-content</h3>

<pre class="brush:css">p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
}</pre>

<pre class="brush:html">&lt;p class="minblue"&gt;Сообщество Mozilla производит множество отличного ПО.&lt;/p&gt;</pre>

<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>

<h2 id="Проблемы_доступности">Проблемы доступности</h2>

<p>Убедитесь, что элементы с <code>width</code> не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
   <td>{{Spec2('CSS3 Sizing')}}</td>
   <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Определяет <code>width</code> как анимируемое.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Уточняет к какому элементу относится</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Первоначальное определение.</td>
  </tr>
 </tbody>
</table>

<div>{{cssinfo}}</div>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div>

<p>{{Compat("css.properties.width")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/ru/docs/Web/CSS/box_model">Блочная модель</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
</ul>