Что такое box-sizing border-box на CSS
168 смотрели · 2 года назад
Что делает * { box-sizing: border-box; }? В чём его преимущества? По умолчанию все элементы имеют box-sizing: content-box. Размеры блока рассчитываются из размеров контента. box-sizing: border-box меняет то, как расчитываются width и height. Border и padding включаются в расчёт. Высота будет состоять из: высота контента + вертикальные padding'и + ширина вертикальных border. Ширина будет состоять из: ширина контента + горизонтальные padding'и + ширина горизонтальных border. #вопросы_по_css
Блочная модель и box-sizing
Элементы в CSS представляют собой набор слоёв: ширина и высота самого элемента (width и height), поля элемента (padding), граница элемента (border) и отступы (margin). Подробнее о блочной модели стоит почитать здесь. Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элемента с разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг: https://codepen.io/artik-man/pen/KKPMpdm На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing...