Главное меню
HTML
CSS
CMS Joomla!
Дизайн сайта
Авторизация



Home Границы и отступы

PostHeaderIcon Границы и отступы

CSS - Справочник

Границы элементов

border - задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.
border: [{border-color}] [{border-style}] [{border-width}];
Значение по умолчанию medium none.
Поддерживается IE начиная с 4.0

border-color - (IE) задает цвет всех границ элемента страницы. Заменяет атрибуты border-top-color, border-right-color, border-bottom-color и border-left-color.
border-color: {border-top-color} [{border-right-color}] [{border-bottom-color}] [{border-left-color}];
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится к верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
Поддерживается IE начиная с 4.0

border-color - (NN) задает цвет границ элемента страницы.
border-color: none|{Цвет};
Может быть задано либо цветное значение, либо none, обозначающее отсутствие границ.
Поддерживается NN начиная с 4.0

border-top-color - задает цвет верхней границы элемента страницы.
border-top-color: {Цвет};
Поддерживается IE начиная с 4.0

border-bottom-color - задает цвет нижней границы элемента страницы.
border-bottom-color: {Цвет};
Поддерживается IE начиная с 4.0

border-left-color - задает цвет левой границы элемента страницы.
border-left-color: {Цвет};
Поддерживается IE начиная с 4.0

border-right-color - задает цвет правой границы элемента страницы.
border-right-color: {Цвет};
Поддерживается IE начиная с 4.0

border-style - задает тип сразу всех границ элемента страницы в один прием. Заменяет атрибуты border-top-style, border-right-style, border-bottom-style и border-left-style.
border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-style: none; - запрещает рисование границы (значение по умолчанию);
border-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-style: solid; - рисует сплошную линию;
border-style: double; - рисует двойную сплошную линию;
border-style: groove; - рисует трехмерную вдавленную границу;
border-style: ridge; - рисует трехмерную выпуклую границу;
border-style: inset; - рисует трехмерную "ступеньку вверх";
border-style: outset; - рисует трехмерную "ступеньку вниз".
Поддерживается IE и NN начиная с 4.0

border-top-style - задает тип верхней границы элемента страницы.
border-top-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-top-style: none; - запрещает рисование границы (значение по умолчанию);
border-top-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-top-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-top-style: solid; - рисует сплошную линию;
border-top-style: double; - рисует двойную сплошную линию;
border-top-style: groove; - рисует трехмерную вдавленную границу;
border-top-style: ridge; - рисует трехмерную выпуклую границу;
border-top-style: inset; - рисует трехмерную "ступеньку вверх";
border-top-style: outset; - рисует трехмерную "ступеньку вниз".
Поддерживается IE начиная с 4.0

border-bottom-style - задает тип нижней границы элемента страницы.
border-bottom-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-bottom-style: none; - запрещает рисование границы (значение по умолчанию);
border-bottom-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-bottom-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-bottom-style: solid; - рисует сплошную линию;
border-bottom-style: double; - рисует двойную сплошную линию;
border-bottom-style: groove; - рисует трехмерную вдавленную границу;
border-bottom-style: ridge; - рисует трехмерную выпуклую границу;
border-bottom-style: inset; - рисует трехмерную "ступеньку вверх";
border-bottom-style: outset; - рисует трехмерную "ступеньку вниз".
Поддерживается IE начиная с 4.0

border-left-style - задает тип левой границы элемента страницы.
border-left-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-left-style: none; - запрещает рисование границы (значение по умолчанию);
border-left-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-left-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-left-style: solid; - рисует сплошную линию;
border-left-style: double; - рисует двойную сплошную линию;
border-left-style: groove; - рисует трехмерную вдавленную границу;
border-left-style: ridge; - рисует трехмерную выпуклую границу;
border-left-style: inset; - рисует трехмерную "ступеньку вверх";
border-left-style: outset; - рисует трехмерную "ступеньку вниз".
Поддерживается IE начиная с 4.0

border-right-style - задает тип правой границы элемента страницы.
border-right-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;
border-right-style: none; - запрещает рисование границы (значение по умолчанию);
border-right-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-right-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-right-style: solid; - рисует сплошную линию;
border-right-style: double; - рисует двойную сплошную линию;
border-right-style: groove; - рисует трехмерную вдавленную границу;
border-right-style: ridge; - рисует трехмерную выпуклую границу;
border-right-style: inset; - рисует трехмерную "ступеньку вверх";
border-right-style: outset; - рисует трехмерную "ступеньку вниз".
Поддерживается IE начиная с 4.0

border-width - задает толщину всех границ элемента страницы. Заменяет атрибуты border-top-width, border-right-width, border-bottom-width и border-left-width.
border-width: {border-top-width} [{border-right-width}] [{border-bottom-width}] [{border-left-width}];
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится в верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Поддерживается IE и NN начиная с 4.0

border-top-width - задает толщину верхней границы элемента страницы.
border-top-width: medium|thin|thick|{Толщина};
Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Поддерживается IE и NN начиная с 4.0

border-bottom-width - задает толщину нижней границы элемента страницы.
border-bottom-width: medium|thin|thick|{Толщина};
Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Поддерживается IE и NN начиная с 4.0

border-left-width - задает толщину левой границы элемента страницы.
border-left-width: medium|thin|thick|{Толщина};
Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Поддерживается IE и NN начиная с 4.0

border-right-width - задает толщину правой границы элемента страницы.
border-right-width: medium|thin|thick|{Толщина};
Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.
Поддерживается IE и NN начиная с 4.0

border-top - задает все свойства верхней границы элемента страницы за один прием. Заменяет атрибуты border-top-color, border-top-style и border-top-width. Значения этих атрибутов могут располагаться в любом порядке.
border-top: [{border-top-color}] [{border-top-style}] [{border-top-width}];
Значение по умолчанию medium none.
Поддерживается IE начиная с 4.0

border-bottom - задает все свойства нижней границы элемента страницы за один прием. Заменяет атрибуты border-bottom-color, border-bottom-style и border-bottom-width. Значения этих атрибутов могут распологаться в любом порядке.
border-bottom: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];
Значение по умолчанию medium none.
Поддерживается IE начиная с 4.0

border-left - задает все свойства левой границы элемента страницы за один прием. Заменяет атрибуты border-left-color, border-left-style и border-left-width. Значения этих атрибутов могут распологаться в любом порядке.
border-left: [{border-left-color}] [{border-left-style}] [{border-left-width}];
Значение по умолчанию medium none.
Поддерживается IE начиная с 4.0

border-right - задает все свойства правой границы элемента страницы за один прием. Заменяет атрибуты border-right-color, border-right-style и border-right-width. Значения этих атрибутов могут распологаться в любом порядке.
border-right: [{border-right-color}] [{border-right-style}] [{border-right-width}];
Значение по умолчанию medium none.
Поддерживается IE начиная с 4.0

border-collapse - задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет. Применяется только для тега <TABLE>.
border-collapse: separate|collapse;
border-collapse: separate; - разделяет границу табилицы и границы ее ячеек (значение по умолчанию);
border-collapse: collapse; - объединяет их.
Поддерживается IE начиная с 5.0

 

Отступы

margin - задает ширины полей между элементами страницы и его соседями. Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left.
margin: {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}];
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0

margin-top - задает верхнее поле между элементом страницы и его соседями сверху.
margin-top: auto|{Y}|{Y}%;
Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0

margin-right - задает правое поле между элементом страницы и его соседями справа.
margin-right: auto|{X}|{X}%;
Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0

margin-bottom - задает нижнее поле между элементом страницы и его соседями снизу.
margin-bottom: auto|{Y}|{Y}%;
Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0

margin-left - задает левое поле между элементом страницы и его соседями слева.
margin-left: auto|{X}|{X}%;
Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0

padding - задает отступ между элементом страницы и различными границами. Заменяет атрибуты padding-top.
margin-left: auto|{X}|{X}%;
Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0

padding-top - задает расстояние между элементом страницы и верхней границей.
pading-top: {Y}|{Y}%;
Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.
Значение по умолчанию 0, для тега <TD> 1.
Поддерживается IE и NN начиная с 4.0

padding-right - задает расстояние между элементом страницы и правой границей.
pading-right: {X}|{X}%;
Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.
Значение по умолчанию 0, для тега <TD> 1.
Поддерживается IE и NN начиная с 4.0

padding-bottom - задает отступ между элементом страницы и нижней границей.
pading-bottom: {Y}|{Y}%;
Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.
Значение по умолчанию 0, для тега <TD> 1.
Поддерживается IE и NN начиная с 4.0

padding-left - задает расстояние между элементом страницы и левой границей.
pading-left: {X}|{X}%;
Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.
Значение по умолчанию 0, для тега <TD> 1.
Поддерживается IE и NN начиная с 4.0
 

© Веб-дизайн для начинающих.
Москва, 2011–2014