Теория
Теория

Изменяем блочную модель, свойство box-sizing

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

К счастью, такая возможность в CSS есть. Реализуется она с помощью свойства box-sizing.

Это свойство имеет два значения:

content-box — значение по умолчанию, соответствует стандартной блочной модели.
border-box — изменяет режим расчёта ширины элемента на описанный выше: теперь ширина элемента включает и рамку, и внутренние отступы и, собственно, ширину содержания самого элемента.

Полезная статья про box-sizing на русском — «Используйте свойство box-sizing».

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изменяем блочную модель, свойство box-sizing</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <form action="https://echo.htmlacademy.ru" method="post"> <div class="block" style="width: 200px;"> <input type="text" value="Фамилия"> </div> <div class="block" style="width: 250px;"> <input type="text" value="Имя"> </div> <div class="block" style="width: 300px;"> <input type="text" value="Отчество"> </div> </form> </body> </html>

CSS

body { padding: 20px; } .block { margin-bottom: 20px; padding: 20px; } input[type="text"] { width: 100%; padding: 10px 20px; font-size: 16px; color: #666666; border: 2px solid black; }

ЗадачиВыполнено

Задайте полям формы свойство box-sizing со значением border-box.

Изменяем блочную модель, свойство box-sizing

Вход

Регистрация

Восстановление доступа