http://goo.gl/4alKee

Магия CSS. Глава 1. Блок

В CSS блочная модель описывает прямоугольные блоки, которые генерируются для элементов, располагающихся на странице.

Иллюстрация блочной модели
  • outline и box-shadow не являются частью блока и, следовательно, не оказывают никакого влияния на раскладку.

Размеры блока

Свойство box-sizing дает вам немного контроля над тем, как будут высчитываться размеры блоков внутри этой модели. Есть два значения для box-sizing, о которых вам стоит сейчас знать: content-box и border-box.

.box {
height: 5em;
width: 5em;
padding: 1em;
border: .25em solid
}

Магия! “Гибкие” input’ы

Преимуществ использования border-box является то, что вы можете задать padding и width в смешанных единицах не перегибая палку со странными размерами. Фантастический способов использования этого — создание “гибких” input’ов с фиксированными внутренними отступами.

html {   
-webkit-box-sizing: border-box; /* Нужно для iOS ниже 4,
Android ниже 2.3 */
-moz-box-sizing: border-box; /* Нужно для Firefox ниже 28 */
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Внеклассное чтение

Цитирование

  1. w3: Box model
  2. MDN: box-sizing — есть еще padding-box, но не стоит о нем беспокоится.
  3. Paul Irish: * { Box-sizing: Border-box } FTW

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC