box-sizing: border-box - делаем так, чтобы отступы не учитывались в ширине блока

Я иногда несказанно торможу. Например, вообще забыл про просто спасительное для адаптивной верстки box-sizing: border-box, поддерживаемое всеми современными браузерами.

Вот очень простой пример из трех блоков шириной 180px. Первый - с отступом в 10 пикселей и рамкой 3px, второй - без отступа. Третий - просто с рамкой и с использованием box-sizing: border-box.

И тут видно самое интересное. Если не использовать box-sizing: border-box, то ширину блоку добавляет не только внутренний отступ padding, но и сама рамка. И если в некоторых случаях в мобильном дизайне мы можем подобрать для элементов width: 31%; padding: 1%, чтобы выстроить их по 3 в ряд, например, то любая рамка в 1 пиксель уже все испортит. Для таких случаев и нужен box-sizing: border-box.

Особенно хорошо он помогает для полей форм отправки комментариев. А еще - для меню и картинок, которым кто-то зачем-то добавил внутренний отступ и рамку. В общем, если у блока есть padding и обводка, все рамно можно ставить width: 100% или max-width: 100%.

Думаю, шаблон для начала работы по мобильной адаптации можно чуть обновить:

@media screen and (max-width: 775px) {

img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}

iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}

table, span, div, ins {max-width: 100% !important;}

}

@media screen and (max-width: 500px) {

td, th{word-wrap: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}

}