14/23 Почему бокс тянется только вправо?

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

Возникли два вопроса по заданию 14/23.

  1. В задании 14/23 у полей ввода устанавливается ширина области содержимого width: 100%. Далее предлагается установить горизонтальные паддинги для них.

Если установить padding-right: 20px, то область содержимого полей останется на месте, а вправо сдвинется правая граница, выползая за пределы родительского контейнера и игнорируя его правый паддинг.

image

Если же после этого установить padding-left: 20px, то область содержимого поползет вправо и правая граница сдвинется еще правее. А левая граница полей ввода останется на месте и продолжит учитывать левый паддинг родительского контейнера.

image

Почему при увеличении паддингов (или границ) бокса полей ввода расползание происходит только вправо, а не в обе стороны равномерно? Почему левый паддинг родительского элемента не игнорируется аналогичным образом при width: 100% у вложенного элемента?

  1. Элемент поля ввода является строчным - до и после него нет переносов.

В разделе 5/23 написано, что строчные боксы учитывают только горизонтальные маргины.

Почему если задать вертикальные маргины полям ввода в задании 14/23, то они будут не только отображены, но и учтены родительским контейнером?

2

  1. Таково поведение блоков с дочерним элементов, большей ширины, чем родитель при width = 100%. Это задание как раз объясняет, что элементы ведут себя именно так. То есть левый отступ учитывается, а когда дочерний элемент не помещается, он начинает выпадать из родителя.

  2. У input блочно-строчный тип бокса, поэтому он воспринимает отступы.

3

  1. Я заметил, что так ведут себя все элементы в принципе. Т.е. родительские контейнеры, имеющие фиксированную ширину области содержимого и заключенные в body тоже ползут вправо при установке как их правого паддинга, так и левого. И вывалиться они могут тоже только за правую границу окна браузера (включится скролл), но не за левую.

  2. Точно, блочно-строчный, спасибо.