Каскадные таблицы стилей Блочные и строковые элементы

Атрибуты описания стиля строкового элемента являются подмножеством атрибутов описания стиля блочного элемента. DIV – обобщение блочного элемента; SPAN – обобщение строкового элемента. Пример: Параграф – блочный элемент разметки (block). Выделение курсивом – строковый элемент разметки (in-line).

Элемент DIV Блочный элемент, заданный элементом разметки DIV. Для него определена граница и отступы как от границ старшего элемента разметки, так и для вложенных в него элементов разметки.

Элемент SPAN HTML-элементCSS-аналог...

Элемент SPAN предложение с пересекающимися стилями

Свойства блоков Высота (height), Ширина (width), Граница (border), Отступ (margin), Набивка (padding), Произвольное размещение (float), Управление обтеканием (clear).

Свойства блоков пикселы типографские пункты условные единицы

Свойства блоков

Отступы (margin) margin-left левый внешний отступ. Определяет расстояние от левой границы блока текста до левой границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin-right правый внешний отступ. Определяет расстояние от правой границы блока текста до правой границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin-top верхний внешний отступ. Определяет расстояние от верхней границы блока текста до верхней границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin-bottom нижний внешний отступ. Определяет расстояние от нижней границы блока текста до нижней границы внутреннего отступа ("набивки", padding) охватывающего элемента; margin задает общий внешний отступ от всех сторон блока текста. Применяется в том случае, если блок текста равноудален от всех границ внутреннего отступа охватывающего элемента.

Отступы (margin) P { margin-left:50px;margin-right:5px; margin-top:15px; margin-bottom:50px; padding:0px;text-align:left; }

Набивка (padding) padding-left левый внутренний отступ, который определяет расстояние от левого края блока до его содержания; padding-right правый внутренний отступ, который определяет расстояние от правого края блока до его содержания; padding-top верхний внутренний отступ, который определяет расстояние от верхнего края блока до его содержания; padding-bottom нижний внутренний отступ, который определяет расстояние от нижнего края блока до его содержания; padding определяет единый размер внутреннего отступа блока. Этот параметр задается в случае одинакового размера отступа от всех сторон блока.

Набивка (padding) P {padding-left:100px;padding-right:50px; padding- top:20px; padding-bottom:10px; text-align:left; border- width:1px; }

Граница (border) border-top-width ширина верхней границы блока; border-bottom-width ширина нижней границы блока; border-left-width ширина левой границы блока; border-right-width ширина правой границы блока; border-width ширина границы блока. Задается в том случае, если ширина границы блока одинаковая по всему периметру блока; border-color цвет границы блока. Может быть задан для каждой из границ блока. border-style тип линии границы блока. Может принимать значения: none, dotted, dashed, solid, double, groove, ridge, inset, outset. Может быть задан для каждой из границ блока. P {text-align:left; border- width:2px; border- color:darkred; border- style:solid;}

Обтекание блока текста Атрибут float определяет "плавающий" блок текста. Значения: left блок прижат к левой границе охватывающего элемента; right блок прижат к правой границе охватывающего элемента; both текст может обтекать блок с обеих сторон. Атрибут clear управляет обтеканием. Он не допускает наличия "плавающих" блоков около блока текста. Значения: right, left, none, both. Обтеканием блока текста другим текстом управляют атрибуты float и clear.