Базовые свойства блока в CSS.

Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график.

автор: Васильев Олег Никандрович.

(продолжение)

Блок элемента - это не только подразумеваемый блок в модели визуального форматирования CSS. Каждый символ и элемент строки также «на ходу» формирует блок, так называемые прямоугольники. Внутристрочные блоки применяются пользовательским агентом браузером для вычисления высоты каждой строки в потоке текста и пространства вокруг элементов. Блоки строк и внутристрочные блоки не являются элементами. Это просто метод модели визуальной раскладки. Следовательно, не можете-использовать селектор для выбора строки или внутристрочного блока и применять к ним стили (но, конечно, можете применять стили к внутристрочным элементам).

Знание о внутристрочных блоках, работающих «за кулисами», полезно для управления высотой строки, а также для указания вертикального выравнивания внутристрочных элементов. Эти блоки также учитываются, когда нужно указать конкретные их свойства, в особенности применительно к внутристрочным элементам, вот, Вам и практическое применения воображаемых прямоугольников.

Область содержания в CSS.

Каждый элемент строки имеет блок области содержания, который соответствует области содержания в блоковой модели страниц сайта. Для текстовых элементов (которые также называются незамененными, поскольку их содержимое находится в исходном коде документа) высота области содержания определяется значением свойства font-size элемента. Для анонимного текста (который не содержится в конкретном внутристрочном элементе) значение font-size наследуется из родительского элемента. Для изображений (и других замененных элементов) размер области содержания равен ширине и высоте изображения в пикселах.

Внутристрочный блок в CSS.

Высота внутристрочного блока вычисляется как общий размер области содержания элемента плюс межстрочный интервал, добавленный над и под ним. Разница между значениями font-size и line-height как раз равна межстрочному интервалу. Это значение может быть отрицательным, и тогда строки будут перекрываться. Для изображений (и замененных элементов) внутристрочный блок равен высоте изображения в пикселах плюс высота рамок и полей, добавленных к элементу img.

Блок строки в CSS.

Блок строки в CSS рисуется над самым высоким внутристрочным блоком и под самым низким внутристрочным блоком. Он представляет собой полное необходимое для строки и всех ее элементов пространство по вертикали. Значения свойства vertical-align-top и bottom относятся к верхнему и нижнему краю блока строки.

Еще раз подчеркнем, что, ко всему прочему, каждый символ строки формирует свой блок: em-блок, в CSS есть квадратный модуль, равный по размеру значению свойства font-size для данного элемента. Связь em-блока с реальными символами зависит от гарнитуры и содержит в себе верхние и нижние выносные элементы букв.

Как бы нам не хотелось, иногда, приходиться вычислять всякие там разницы полей и интервалов и их суммы для учитывания реального размера элементов, чтобы страница сайта адекватна отображалась на клиентских экранах.