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 Значение элемента наследуется от родительского элемента.





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