Html style width example

width

Свойство CSS width устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если box-sizing имеет значение border-box , то она будет равняться ширине области рамки.

Интерактивный пример

Синтаксис

/* значения */ width: 300px; width: 25em; /* значения */ width: 75%; /* Значения-ключевые слова */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* Глобальные значения */ width: inherit; width: initial; width: unset; 

Свойство width указывается как:

Значения

Ширина — фиксированная величина.

Ширина в процентах — размер относительно ширины родительского блока.

border-box Экспериментальная возможность

content-box Экспериментальная возможность

Браузер рассчитает и выберет ширину для указанного элемента.

fill Экспериментальная возможность

Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.

max-content Экспериментальная возможность

Внутренняя максимальная предпочтительная ширина.

min-content Экспериментальная возможность

Внутренняя минимальная ширина.

available Экспериментальная возможность

Ширина содержащего блока минус горизонтальные margin , border и padding .

fit-content Экспериментальная возможность

• внутренняя минимальная ширина
• меньшая из внутренней предпочтительной ширины и доступной ширины

Формальный синтаксис

width =
auto | (en-US)
(en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( (en-US) )

=
| (en-US)

Примеры

Ширина по умолчанию

p class="goldie">Сообщество Mozilla производит множество отличного ПО.p> 

Пиксели и em

.px_length  width: 200px; background-color: red; color: white; border: 1px solid black; > .em_length  width: 20em; background-color: white; color: red; border: 1px solid black; > 

div class="px_length">Ширина в пикселяхdiv> div class="em_length">Ширина в emdiv> 

Проценты

.percent  width: 20%; background-color: silver; border: 1px solid red; > 

div class="percent">Ширина в процентахdiv> 

max-content

p.maxgreen  background: lightgreen; width: intrinsic; /* Safari/WebKit используют нестандартное имя */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ > 

p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.p> 

min-content

p.minblue  background: lightblue; width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */ > 

p class="minblue">Сообщество Mozilla производит множество отличного ПО.p> 

Проблемы доступности

Убедитесь, что элементы с width не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

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

Начальное значение	auto
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуется	нет
Проценты	ссылается на ширину содержащего блока
Обработка значения	процент, auto или абсолютная длина
Animation type	длина, проценты или calc();

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 10 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Html style width example

width: значение | проценты | auto | inherit

Значения «width«.

Единица измерения любая — принятая в CSS — пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентов, ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

width можно использовать тремя способами :

width в атрибуте attribute style

width в теге style

width и файле file css

width в атрибуте attribute style

width в теге style

width и файле file css

Пример использования «width» внутри атрибута style

Для того, чтобы показать поведение межстрочного расстояния с помощью сыновства width, будем использовать :

Во внутрь тега добавляем атрибут attribute style.

И чтобы мы могли увидеть края блока добавим свойство border

Главное свойство, которое поместим в атрибут — это width.

В качестве примера возьмем четыре значение width : 100px, 200px, 300px, 400px.

Соберем весь код вместе, в качестве примера кода используем первую строку с width = 100px:

Примеры использовании width

Использование width внутри атрибута style + width:100px;border: 1px solid; Пару строк, что бы было видно поведение блока

Использование width внутри атрибута style + width:200px;border: 1px solid; Пару строк, что бы было видно поведение блока

Использование width внутри атрибута style + width:400px;border: 1px solid; Пару строк, что бы было видно поведение блока

Использование width внутри атрибута style + width:300px;border: 1px solid; Пару строк, что бы было видно поведение блока

Пример использования «width» внутри тега style

Этот класс будет прописан в теге , который будет размещен на странице.

ширина блока через тег style

Вы видите поведение каждой из строк, и наверняка заметили, что поведение двух пунктах ничем не отличается.

Использование width внутри тега style + тег «p» width:100px Несколько строк, для заполения пространства

Использование width внутри тега style + тег «p» width:200px Несколько строк, для заполения пространства

Использование width внутри тега style + тег «p» width:400px Несколько строк, для заполения пространства

Использование width внутри тега style + тег «p» width:300px Несколько строк, для заполения пространства

Пример использования «width» внутри файла css

Поведение width — высоты блока через файл css ничем не отличается от того, что вы видели в предыдущем пункте, единственное — это расположение класса — он будет размещаться в файле file css.

Источник

CSS width Property

The width of an element does not include padding, borders, or margins!

Note: The min-width and max-width properties override the width property.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.width=»500px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
auto	Default value. The browser calculates the width	Demo ❯
length	Defines the width in px, cm, etc. Read about length units	Demo ❯
%	Defines the width in percent of the containing block	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the width of an element using a percent value:

Example

Set the width of an element to 100px. However, when it gets focus, make it 250px wide:

input[type=text]:focus width: 250px;
>

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

width

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег ). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры неодинаково работают с шириной, результат отображения зависит от используемого . В табл. 1 приведены возможные варианты и получаемая ширина.

Синтаксис

width: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

auto Устанавливает ширину исходя из типа и содержимого элемента. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Объектная модель

[window.]document.getElementById(» elementID «).style.width

Браузеры

Браузер Internet Explorer 6 некорректно определяет width как min-width . В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник