Отступы(margin)   

При отображении блока текста на листе бумаги вокруг него традиционно оставляют поля. Поля есть и в ученических тетрадях, и в крупных серьезных книгах. Поля дозволено задавать либо касательно границы страницы, либо касательно самого блока текста. В первом случае мы имеем дело с "набивкой" (padding), а во втором - с отступом (margin). Собственно, ширина поля будет определяться суммой ширины "набивки" и ширины отступа:

 

Традиционно пунктирная линия и граница блока являются заметными линиями. Они угадываются по выравненному краю текста. Правильней угадывается суммарная ширина полей. Стрелки указывают направление отсчета отступа. Padding отсчитывается от внешней границы блока вовнутрь блока, в то время как margin от внешней границы блока в область охватывающего его блока (наружу).

Внешний отступ(margin) может отсчитываться по любому направлению касательно сторон блока:

margin-left:
левый внешний отступ. Определяет расстояние от левой границы блока текста до левой границы внутреннего отступа("набивки", padding) охватывающего элемента
margin-right:
правый внешний отступ. Определяет расстояние от правой границы блока текста до левой границы внутреннего отступа("набивки", padding) охватывающего элемента
margin-top:
верхний внешний отступ. Определяет расстояние от верхней границы блока текста до верхней границы внутреннего отступа("набивки", padding) охватывающего элемента
margin-bottom:
нижний внешний отступ. Определяет расстояние от нижний границы блока текста до нижней границы внутреннего отступа("набивки", padding) охватывающего элемента
margin:
задает всеобщий внешний отступ от всех сторон блока текста. Используется в случае равноудаленности блока текста от всех границ внутреннего отступа охватывающего элемента.

Графически эти отступы дозволено представить дальнейшим образом:

 

В данном случае для параграфа применялось следующее изложение жанра:

p {margin-left:50px;margin-right:5px;
margin-top:15px;margin-bottom:50px;
padding:0px;text-align:left;}

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

Если размер всех внешних отступов идентичный, то дозволено легко воспользоваться признаком margin:

p {margin:5px;}

При использовании внешнего отступа следует помнить, что он отсчитывается от границы элемента до границы внутреннего отступа ("набивки", padding) охватывающего элемента. Если не рассматривать этого факта, то всеобщая ширина видимых полей может оказаться огромнее, чем указано во внешнем отступе.

далее...