scroll – переполнение контента обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого.
auto – аналогично прокрутке, но добавляет полосы прокрутки только при необходимости.
В результате мы можем увидеть, что наш блок имеет размеры не 300 пикселей на 50 пикселей, а здесь добавляется отступ, ширина границы и поле. Так что, когда вы устанавливаете размеры блока, нужно учитывать и все остальные свойства. Здесь на самом деле мы устанавливаем не ширину блока, а ширину содержимого.
В CSS 3 есть такое свойство как box-sizing со значением border-box.
Свойство CSS box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.
Без свойства CSS box-sizing, по умолчанию ширина и высота элемента вычисляются следующим образом:
ширина + отступ + граница = фактическая ширина элемента
высота + отступ + граница = фактическая высота элемента
С этим значением border-box свойства box-sizing все будет включено и размер нашего блока станет 300 пикселей на 50 пикселей.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «Литрес».
Прочитайте эту книгу целиком, купив полную легальную версию (https://www.litres.ru/chitat-onlayn/?art=70112947&lfrom=174836202&ffile=1) на Литрес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
