X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS свойство width

CSS свойство width устанавливает ширину элемента. Ширина не включает padding, border или margin.

Свойство width применяется ко всем элементам, кроме незаменяемых или строчных элементов, строк и групп строк таблицы (т. е. <thead>, <tfoot> и <tbody>).

Свойство указывается единицами измерения длины (px, pt, em и т. д.), процентами или ключевым словом auto.

Свойство width может быть переопределено свойствами min-width и max-width.

Отрицательные значения длины недопустимы.

Многие значения свойства width, добавленные в спецификацию CSS3, до сих пор являются экспериментальными.

Значение по умолчанию auto
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да. Ширина элемента анимируема.
Версия CSS1
DOM синтаксис Object.style.width = "300px";

Синтаксис

width:  auto | lenght | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      width: 50%;
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства width</h2>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </div>
  </body>
</html>

В данном примере ширина текста равна 50%.

В следующем примере ширина первого элемента равна 250px, а ширина второго указана как 25em:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.t1 {
      width: 250px;
      border: 1px solid black;  
      background-color: #1c87c9;
      }
      div.t2 {
      width: 25em;
      border: 1px solid black;  
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства width</h2>
    <h3>width: 250px</h3>
    <div class="t1">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
    <h3>width: 25em</h3>
    <div class="t2">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Значения

Значение Описание
auto Браузер вычисляет ширину для указанного элемента. Значение по умолчанию.
length Указывает ширину в px, pt, cm и т. д.
% Указывает ширину в процентах.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.



Считаете ли это полезным?

Похожие статьи