Глава 8. Поля и отступы

В этой главе мы поговорим о полях (margin) и отступах (padding) элемента. Между собой эти 2 свойства весьма схожи, однако все же это 2 абсолютно разных свойства.

Давайте разберемся в этих понятиях.

Поле (margin) - это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя (границы того блока, в который вложен элемент).

Отступ (padding) - это расстояние от внутренней границы элемента до его содержания текста, картинок, таблиц.

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border) (про него тоже не следует забывать).

Расстояния margin и padding указываются:

px - в пикселях или любых других допустимых единицах измерения;

% - в процентах;

auto - размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков div и свойств CSS.

Пример:

<title>Поля и отступы</title>

div.block2{background:#c0e;margin:88px;padding:8px}</style>

Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!

</div>

смотреть пример

Попробуйте поменять значения свойств margin и padding и Вы поймете, что к чему. а если и так понятно идем дальше.

Возможные значения margin и padding

В примере выше присудив свойствам margin и padding по одному значению, мы определили поля и отступы элемента со всех четырех его сторон. Для того чтобы указать разные размеры полей и отступов для каждой из сторон элемента, необходимо указывать два, 3 или 4 аргумента через пробел. Причем в зависимости от количества значений результат будет разным.

Вот примеры:

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

Пример:

<title>Поля и отступы</title>

#block2{background:#c0e;margin:8px;padding:8px}</style>

Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!

</div>

Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!

</div>

смотреть пример

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

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

У margin зто:

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

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

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

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

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

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

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

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

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

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

Пример:

<title>Поля и отступы</title>

Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!

</div>

<p>

Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!

</div>

смотреть пример

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

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

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

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

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

<< предыдущая глава | следующая глава >>

Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

Ваше письмо	×