Свойства внутреннего отступа

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

Внутренний отступ

padding: 10px;

padding-top: 10px;

padding: 10px 20px 30px 40px;

padding: 10px 20px 30px;

padding: 10px 20px;

Первая запись в примере определяет отступ внутри элемента, равный 10 пикселям по всем четырем сторонам. Вторая запись определяет внутренний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу, а затем слева. Четвертая запись определяет внутренний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись задает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей.

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