Кроме того, мы добавили свойство 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 пикселей.
