Width, css, webreference

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

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

Табл. 1. Дія width в браузерах

Opera 10+, Firefox, Chrome, Safari

Не вказаний (режим сумісності)

Якщо вміст перевищує задану ширину, то блок змінює свої розміри, підлаштовуючись під вміст. В іншому випадку ширина блоку дорівнює значенню width.

У всіх випадках браузер діє по специфікації CSS. А саме, ширина блоку виходить складанням значень width. padding. margin і border.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх блоку.

Ширина дорівнює значенню width.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.

перехідний HTML

строгий HTML

Ширина формується шляхом складання значень width. padding. margin і border.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.

Ширина дорівнює значенню width плюс padding. margin. і border.

Вміст блоку, якщо не поміщається в задані розміри, відображається поверх.

HTML 5

XHTML

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

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

Результат даного прикладу показаний на рис. 1.

Width, css, webreference

Мал. 1. Ширина блоку

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

Примітка

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

Специфікація?

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Браузери?

У таблиці браузерів застосовуються такі позначення.

  • - властивість повністю підтримується браузером з усіма допустимими значеннями;
  • - властивість браузером не сприймається і ігнорується;
  • - при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.

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

Рекомендуємо

властивості CSS

значення властивостей

На сайті знаходяться довідники з різних веб-технологіями, а також керівництва по верстці веб-сторінок і розробці мобільних додатків.