# width

/Internet Explorer | /Netscape | /Opera | /Safari | /Firefox
6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0
Помилки | Частково | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

## Коротка інформація

CSS | CSS1
Значення за умовчанням | auto
Наслідує | Ні
Застосовується | До блокових елементів
Аналог HTML | <img width>, <table width>
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visudet.html#propdef - width

### Опис

Встановлює ширину блокових або замінюваних елементів (до них, наприклад, відноситься тег <IMG>). Ширина не включає товщину меж навколо елементу, значення відступів і полів.

Браузери неоднаково працюють з шириною, результат відображення залежить від використовуваного DOCTYPE. У таблиці. 1 приведені можливі варіанти DOCTYPE і отримувана ширина.

Таблиця. 1. Дія width у браузерах
DOCTYPE | Internet Explorer | Firefox | Opera
Не вказаний | Якщо вміст перевищує задану ширину, то блок змінює свої розміри, аідлаштовуючись під вміст. Інакше ширина блоку дорівнює значенню width. | У усіх випадках Firefox діє по специфікації CSS. А саме, ширина блоку виходить складанням значень width, padding, margin і border. Вміст блоку, якщо не поміщається в задані розміри, відображається поверх блоку. | Ширина дорівнює значенню width. Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.
"Перехідний"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
"Строгий"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> | Ширина формується шляхом складання значень width, padding, margin і border. Вміст блоку, якщо не поміщається в задані розміри, відображається поверх. | Ширина дорівнює значенню width плюс padding, margin, і border. Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.
XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

### Синтаксис

width: значення | відсотки | auto | inherit

### Значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS, - наприклад, піксели (px), дюйми (in), пункти (pt) та ін. При використанні процентного запису ширина елементу обчислюється залежно від ширини батьківського елементу. Якщо батько явно не вказаний, то в його якості виступає вікно браузеру.

auto Встановлює ширину виходячи з типу і утримуваного елементу.

inherit Наслідує значення батька.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

    <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

        <title>width</title>

        <style type="text/css">

          .layer1 {

            width: 300px; /* Ширина блоку */

            background: #fc0; /* Колір фону */

            padding: 7px; /* Полів навколо тексту */

            border: 1px solid #ccc; /* Параметрів рамки */

          }

          .layer2 {

            width: 400px; /* Ширина текстового блоку */

          }

        </style>

      </head>

      <body>

        <div class="layer1">

          <p class="layer2">Луцький національний техніний університет

    є одним із найкращих професійних закладів освіти у місті Луцьку.

    Найкращою з підготовки спеціалістів є кафедра професійного навчання, що займається професійною підготовкою студентів..</p>

        </div>

      </body>

    </html>

Результат цього прикладу, як він відображається у бразере Opera показаний ні мал. 1.

Мал. 1. Ширина блоку у браузері Opera

### Об'єктна модель

[window.]document.getElementById("elementID").style.width

### Браузери

Браузер Internet Explorer 6 некоректно визначає width як min - width. У режимі несумісності (quirk mode) Internet Explorer до версії 8.0 включно неправильно обчислює ширину елементу, не додаючи до неї значення відступів, полів і меж.

Internet Explorer до сьомої версії включно не підтримує значення inherit.