Дочерние свойства margin и padding.

Дата добавления: 2015-07-09; просмотров: 560; Нарушение авторских прав

Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.

У margin зто:

· margin-top - Поле от верхней границы элемента родителя,

· margin-left- Поле от левой границы элемента родителя,

· margin-right - Поле от правой границы элемента родителя,

· margin-bottom - Поле от нижней границы элемента родителя.

И у padding соответственно:

· padding-top - Отступ от верхней границы элемента до его содержания,

· padding-left - Отступ от левой границы элемента до его содержания,

· padding-right - Отступ от правой границы элемента до его содержания,

· padding-bottom - Отступ от нижней границы элемента до его содержания.

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Поля и отступы</title>
</head>
<body>
<div style="width: 250px; background-color: #c5ffa0; border: 2px solid #a68754">
<div style="background-color: #c0e4ff; border: 2px solid #a68754; margin-left:40px; padding-right: 50px">
<samp>Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!</samp>
</div>
<br>
<div style="background-color: #c0e4ff; border: 2px solid #a68754; margin-right:40px; padding-left: 50px">
<samp>Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!</samp>
</div>
</div>
</body>
</html>

Полезные советы:

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

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

· Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.

· Один из способов акцентирования внимания посетителя страницы на нужном Вам месте - это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к "особым" местам в тексте..

<== предыдущая лекция	\|	следующая лекция ==>
Возможные значения margin и padding.	\|	Стандартные курсоры.