CSS Блочная модель

Блочная модель CSS

Все HTML-элементы можно рассматривать как блоки. В CSS термин "блочная модель" используется для дизайна и макетирования.

Блочная модель CSS — это по сути блок, который оборачивает HTML-элементы. Она включает: внешние отступы, границы, внутренние отступы и собственно содержимое.

Блочная модель позволяет размещать элементы в пространстве между другими элементами и границами окружающих элементов.

Следующее изображение иллюстрирует блочную модель:

Объяснение различных частей:

• Внешний отступ- Очищает область снаружи границы; внешний отступ прозрачен.
• Граница- Граница, которая проходит вокруг внутреннего отступа и содержимого.
• Внутренний отступ- Очищает область вокруг содержимого; внутренний отступ прозрачен.
• Содержимое- Содержимое блока, где отображаются текст и изображения.

Чтобы правильно задать ширину и высоту элемента во всех браузерах, необходимо знать, как работает блочная модель.

Ширина и высота элемента

Важно:Когда вы указываете свойства width и height CSS-элемента, вы задаёте только ширину и высоту области содержимого. Чтобы узнать полный размер элемента, необходимо также добавить внутренние отступы, границы и внешние отступы.

Общая ширина элемента в примере ниже равна 450px:

Давайте рассчитаем это сами:
300px (ширина)
+ 50px (левый + правый внутренний отступ)
+ 50px (левая + правая граница)
+ 50px (левый + правый внешний отступ)
= 450px

Представьте, что у вас есть только 250 пикселей пространства. Давайте зададим элементу общую ширину 250 пикселей:

Формула для вычисления общей ширины конечного элемента выглядит следующим образом:

Общая ширина элемента = ширина + левый внутренний отступ + правый внутренний отступ + левая граница + правая граница + левый внешний отступ + правый внешний отступ

Итоговая формула для вычисления общей высоты элемента выглядит следующим образом:

Общая высота элемента = высота + верхний внутренний отступ + нижний внутренний отступ + верхняя граница + нижняя граница + верхний внешний отступ + нижний внешний отступ

Проблемы совместимости браузеров

После установки подходящего DTD для страницы большинство браузеров будут отображать содержимое в соответствии с приведённой выше иллюстрацией. Однако IE 5 и 6 отображают его неправильно. Согласно спецификации W3C, пространство, занимаемое содержимым элемента, задаётся свойством width, а значения padding и border вокруг содержимого вычисляются отдельно. К сожалению, IE5.x и 6 используют собственную нестандартную модель в режиме quirks. Свойство width в этих браузерах — это не ширина содержимого, а сумма ширин содержимого, padding и border.

Хотя существуют методы решения этой проблемы, лучшим решением в настоящее время является её избегание. То есть не добавляйте padding с заданной шириной к элементу, а вместо этого попробуйте добавить padding или margin к родительскому и дочерним элементам этого элемента.

IE8 и более ранние версии IE не поддерживают задание свойств width для padding и border.

Чтобы решить проблему несовместимости с IE8 и более ранними версиями, просто объявите <!DOCTYPE html> на HTML-странице.