Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Margin Margin-bottom

Свойство margin

Описание

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

Это свойство применимо ко всем элементам.

Структура блока

Значение

Значение задается в единицах длины, принятых в CSS (подробнее здесь...) или в %,

- auto – автоматически задается браузером,

- inherit - принимает значение свойства родительского элемента.

При задании величины отступов допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:

Количество значений Результат
1 Отступы будут установлены от границ элемента для всех его сторон одновременно.
2 Первое значение устанавливает величину отступов от верхней и нижней границ, второе – от боковых границ элемента.
3 Первое значение устанавливает величину отступа от  верхней границы, второе – от боковых границ, а третье значение – от нижней границы элемента.
4 Значения поочередно устанавливают величину отступов от верхней, правой, нижней и левой границ элемента.

Таким образом свойство margin объединяет в себе свойства margin-top , margin-right , margin-bottom и margin-left , которые устанавливают величину отступов от каждой из границ элемента индивидуально.

У окна браузера по умолчанию также установлены отступы. Чтобы от них избавиться необходимо в теге <body> указать для свойства margin значение 0.

Значение по умолчанию

- auto или 0


Пример

Пример - Свойство margin

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство margin </title>
</head>
<body>

<p style="background-color:#CC6666; border:#CC0000 solid 3px; padding:5px; margin:100px;"> Для этого абзаца установлены отступы 100 пикселей. </p>

<p align=center style="background-color:#0099CC; border:#330066 dashed 2px; padding:5px; margin:50px;"> У этого абзаца величина отступов составляет 50 пикселей, но так как у первого абзаца отступы составляют 100 пикселей, то расстояние между 1-м и 2-м абзацами 100 пикселей. </p>

<p style="background-color:#FFCC33; border:#FF0000 double 4px; padding:5px;"> У этого абзаца отступы отсутствуют. Но у 2-го абзаца отступы составляют 50 пикселей, поэтому до него 50 пикселей. </p>

</body>
</html>

При просмотре в браузере

Для этого абзаца установлены отступы 100 пикселей.

У этого абзаца величина отступов составляет 50 пикселей, но так как у первого абзаца отступы составляют 100 пикселей, то расстояние между 1-м и 2-м абзацами 100 пикселей.

У этого абзаца отступы отсутствуют. Но у 2-го абзаца отступы составляют 50 пикселей, поэтому до него 50 пикселей.

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

И еще. Так как отступы располагаются за пределами блока, то фон блока или его фоновое изображение на них не распространяются. Отступы всегда прозрачны, сквозь них просвечивается фон основного блока или фон страницы.

Для строчных элементов...

Хотелось бы отметить, что свойство margin в основном применяется к блочным элементам и к тегу <img>.

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

Свойство margin можно применить и к строчным элементам, но оно для них работает только в горизонтальной плоскости. Таким образом свойства margin-top и margin-bottom к строчным элементам не применимы.


Пример - Свойство margin и строчные элементы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство margin и строчные элементы </title>
</head>
<body>

<p style="border:#CC0033 solid 2px; margin:10px;"> Абзац - это блочный элемент. </p>
<span style="border:#CC0033 solid 2px; margin:10px;"> Строчный элемент. Отступы - 10 пикселей.</span>
<span style="border:#CC0033 solid 2px; margin:10px;"> Строчный элемент. Отступы - 10 пикселей.</span> <br>
<span style="border:#CC0033 solid 2px; margin:0px;"> Отступы - 0 пикселей. </span>
<strong style="border:#CC0033 solid 2px; margin:50px;"> Строчный элемент. Отступы - 50 пикселей. </strong>
<span style="border:#CC0033 solid 2px;"> Строчный элемент. </span>

<p style="border:#CC0033 solid 2px; margin-top:25px; margin-bottom:20px;"> Абзац. Верхний отступ - 25, нижний - 20 пикселей. </p>
<span style="border:#CC0033 solid 2px; margin-left:30px; margin-right:100px;"> Строчный элемент. Отступ слева - 30, справа - 100 пикселей. </span>
<span style="border:#CC0033 solid 2px;"> Строчный элемент. </span> <br>
<span style="border:#CC0033 solid 2px; margin-top:10px;"> Cтрочный элемент. Отступ сверху отсутствует! </span>

</body>
</html>

При просмотре в браузере

Абзац - это блочный элемент.

Строчный элемент. Отступы - 10 пикселей. Строчный элемент. Отступы - 10 пикселей.
Отступы - 0 пикселей. Строчный элемент. Отступы - 50 пикселей. Строчный элемент.

Абзац. Верхний отступ - 25, нижний - 20 пикселей.

Строчный элемент. Отступ слева - 30, справа - 100 пикселей. Строчный элемент.
Cтрочный элемент. Отступ сверху отсутствует!


Попробуйте самостоятельно поэкспериментировать и почитайте о блочных и строчных элементах (подробнее здесь...)!


Свойство List-style-type Свойство Margin Свойство Margin-bottom
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru