D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2017 год

RSS лента новостей, Подписка по Email

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

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

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

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

padding 10px

padding 0px

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;}
}