|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Внутренние и внешние отступы в боксах.

Как и сказал на предыдущей странице отступы не есть обязательными, а только в том случае если этого требует ваш дизайн.

Внешний отступ(margin) устанавливает расстояние от бокса к соседям.
Например: DIV{margin:0;} убирает все отступы тегах DIV.
margin это сокращенная форма, которая подразумевает:
margin-top - управляет внешним отступом вверху;
margin-right - управляет внешним отступом справа;
margin-bottom - управляет внешним отступом в низу;
margin-left - управляет внешним отступом слева.
Пример: DIV{
margin-top:10px;
margin-right:-5px;
margin-bottom:110%;
margin-left:auto;
}

Из этого примера четко видно, что значения могут быть цифровыми, в том числе отрицательными если это необходимо, но в этом случае содержимое тега DIV "налазит на соседей". Если значение цифровое и равно нолю, то указывать единицы измерения не обязательно, в остальных случаях просто необходимо!!!
Так-же значение может быть процентах относительно содержимого бокса, например если бы это был не DIV а IMG шириной 100px, то отступ получился бы 110px.
Значение auto используется только с margin-right и/или margin-left, и вычисляется автоматически, честно сказать самое непредсказуемое значение, но об этом поговорим немного позже.

Чтобы не составлять такое громоздкое правило его можно сократить:
DIV{margin:1px;} в этом варианте все внешние отступы получат размер 1пиксель.
DIV{margin:1px 2px;} устанавливает отступы сверху и снизу 1пиксель, а по бокам 2пикселя.
DIV{margin:1px 2px 3px;} а этот вариант устанавливает верхний отступ 1пиксель, правый и левый 2пикселя, а нижний в 3пикселя. Если значение не задано то оно берется с противоположной стороны.
DIV{margin:1px 2px 3px 4px;} (margin-top, margin-right, margin-bottom, margin-left)
Другими словами предыдущий пример можно было записать вот так:
DIV{margin:10px -5px 110% auto;}

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

Внутренние отступы(padding) можно сказать аналогичный margin.
DIV{padding:1px;} управляет 4 сторонами внутренних отступов.
Так-же можно управлять каждой стороной по отдельности:
padding-top - управляет внутренним отступом вверху;
padding-right - управляет внутренним отступом справа;
padding-bottom - управляет внутренним отступом в низу;
padding-left - управляет внутренним отступом слева.
Правила могут быть так-же сокращенными: от DIV{padding:1px;} до DIV{padding:1px 2px 3px 4px;}

Отличается padding от margin только тем что внутренние отступы могут принимать значения числовые и/или процентные, а auto не принимают.

Внутренние отступы(padding) так-же применяются к всем тегам и не наследуются, а так-же используются только для визуального оформления.

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!