CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.

Поведение элемента может зависеть от того, как именно вы зададите его ширину:

Первый вариант. Вариант по умолчанию, когда ширина не задаётся, соответствует значению width: auto;. В этом случае блок занимает всю ширину родительского блока. Если у блока есть внутренние отступы или рамки, то его ширина содержания автоматически уменьшается, а общая ширина остаётся равной ширине родителя.

Второй вариант. Когда ширина блока задана явно, например, width: 100%;. В этом случае ширина содержания блока равна ширине родительского блока. Если блоку добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.

В этом задании вы увидите, как эти эффекты работают на практике. Обратите внимание, что ширины блоков будут рассчитываться автоматически.

Помимо CSS ширина полей ввода может быть задана в значении атрибута size. Ширина width: auto для полей ввода рассчитывается из значения size по умолчанию и не растягивает поля на всю ширину контейнера.