15 раздел

Курсы §10. Блочная модель документа
1

box-sizing:border-box делает width отвечающим за общую ширину (содержимое + отступ + рамка), а не за ширину содержимого. Тогда почему при изменении % в задании поля формы выходят за границу?

input[type="text"] {
    width: 110%;
    padding: 5px 10px;
    color: #666666;
    border: 2px solid #cccccc;
    border-radius: 5px;
    box-sizing: border-box;
}

А еще padding там не работает. По идеи при увеличении отступов по горизонтали расстояние между полем формы и границей рамки должно увеличиться, но этого не происходит.

2

А чего вы ожидаете, задав ширину больше, чем ширина блока-родителя?

Где “там”?

3

в 15 разделе, скриншот наверху

4

Фамилия, Имя и Отчество вылезают за границы

5

“Там же” и padding не работает.

6

А, секунду. Щас проверю

7

Да, Вы правы. Вопрос отпал. Я недоглядел. Мне казалось что указанные % в коде и есть ширина блока-родителя. А они вовсе не к тому относится. Спасибо)

1 лайк