СSS Свойство width
Пример
Установить ширину трех элементов <div>:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
Попробуйте сами »
Определение и использование
Свойство width задает ширину элемента.
Свойство width of an element does not include padding, borders, or margins!
Примечание: Свойства переопределения min-width, max-width и width.
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.width="500px" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Синтаксис
width: auto|value|initial|inherit;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| auto | Значение по умолчанию. Браузер вычисляет ширину | Воспроизвести » |
| length | Определяет ширину в px, cm, т. д. Прочитать о Единицы длины | Воспроизвести » |
| % | Определяет ширину в процентах от содержащего блока | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Задать ширину элемента <img>, используя процентное значение:
img {
width: 50%;
}
Попробуйте сами »
Пример
Установить ширину элемента <input type="text"> в 100px. Однако, когда он получает фокус, сделайть его ширину 250px:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Высота и ширина
CSS Учебник: CSS Бокс модель
CSS Справочник: Свойство height
HTML DOM Справочник: Свойство width
