width
Specifies the width of the content area of an element. The content area of the element width does not include the padding, border, and margin of the element.
Overview table
Syntax
- width: auto
- width: available
- width: border-box
- width: content-box
- width: fit-content
- width: intrinsic
- width: length
- width: max-content
- width: min-content
- width: percentage
Values
Examples
Example using new values that are part of the CSS Basic Box Model that is currently in working draft.
Usage
In the CSS Basic Box Model Working Draft, the values max-content, min-content, available, fit-content, border-box, and content-box were added. It would be a best practice to add the vendor prefix to these until the values are standardized.
width¶
Свойство width устанавливает ширину блочных или заменяемых элементов (к ним, например, относится <img> ).
Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Браузеры неодинаково работают с шириной, результат отображения зависит от используемого <!DOCTYPE> .
Синтаксис¶
Значения¶
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.
width
Свойство CSS width устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если box-sizing имеет значение border-box , то она будет равняться ширине области рамки.
Интерактивный пример
Синтаксис
Свойство width указывается как:
- одно из следующих ключевых слов: available , min-content , max-content , fit-content , auto . или <percentage> . За ними так же могут быть указаны одни из следующих ключевых слов: border-box , content-box .
Значения
Ширина — фиксированная величина.
Ширина в процентах — размер относительно ширины родительского блока.
Если присутствует, то предшествующие <length> или <percentage> применяются к области рамки элемента.
Если присутствует, то предшествующие <length> или <percentage> применяются к внутренней области элемента.
Браузер рассчитает и выберет ширину для указанного элемента.
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
Внутренняя максимальная предпочтительная ширина.
Внутренняя минимальная ширина.
Ширина содержащего блока минус горизонтальные margin , border и padding .
HTML width attribute
The purpose of the HTML width attribute is to specify the width of the element.
Supported elements
HTML width attribute supports iframe, img, object, table, col and colgroup elements.
Syntax
Where ElementName is any supported element.
Type of value
Length for all the supported elements except col and colgroup. For col and colgroup elements it can be the relative length.
Default value
There is no default value of HTML width attribute.
Supported doctypes
HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset. For iframe HTML 4.01 transitional.
Example of HTML width attribute with img element
Result
View this example in a separate browser window
Test your Programming skills with w3resource’s quiz.
Follow us on Facebook and Twitter for latest update.
- Weekly Trends
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook