Введение в веб-разработку с HTML, CSS, JavaScript. Тимур Машнин

мы добавили свойство overflow. Свойство overflow указывает, следует ли обрезать содержимое или добавить полосы прокрутки, когда содержимое элемента слишком велико и не помещается в указанной области. И свойство overflow имеет следующие значения:

      visible – по умолчанию. Переполнение контента в блоке не отсекается, и содержимое отображается за пределами блока.

      hidden – переполнение контента обрезается, и остальное содержимое будет невидимым.

      scroll – переполнение контента обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого.

      auto – аналогично прокрутке, но добавляет полосы прокрутки только при необходимости.

      В результате мы можем увидеть, что наш блок имеет размеры не 300 пикселей на 50 пикселей, а здесь добавляется отступ, ширина границы и поле. Так что, когда вы устанавливаете размеры блока, нужно учитывать и все остальные свойства. Здесь на самом деле мы устанавливаем не ширину блока, а ширину содержимого.

      В CSS 3 есть такое свойство как box-sizing со значением border-box.

      Свойство CSS box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.

      Без свойства CSS box-sizing, по умолчанию ширина и высота элемента вычисляются следующим образом:

      ширина + отступ + граница = фактическая ширина элемента

      высота + отступ + граница = фактическая высота элемента

      С этим значением border-box свойства box-sizing все будет включено и размер нашего блока станет 300 пикселей на 50 пикселей.