Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 8:

Поля в CSS

< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Аннотация: Приводятся способы определения пространства между границей элемента и его содержимым.

Данные параметры определяют пространство между границей элемента и содержимым элемента.

Примеры

  1. Этот пример показывает, как задать левое поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-left: 0.5cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  2. Этот пример показывает, как задать правое поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-right: 3cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  3. Этот пример показывает, как задать верхнее поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-top: 1cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  4. Этот пример показывает, как задать нижнее поле элементов списка.
    <html>
    <head>
    <style type="text/css">
    li {padding-bottom: 2.5cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li>элемент списка</li>
    <li>элемент списка</li>
    <li>элемент списка</li>
    </ol>
    </body>
    
    </html>
  5. Пример показывает, как с помощью параметра padding задать все поля в одном объявлении. Допускается определение от одного до четырех значений.
    <html>
    <head>
    <style type="text/css">
    li.first {padding: 2.5cm}
    li.second {padding: 1cm 2cm}
    </style>
    </head>
    
    <body>
    <ol>
    <li class="first">элемент списка с одинаковыми полями со всех сторон</li>
    <li>элемент списка</li>
    <li class="second">элемент списка, который имеет верхнее и нижнее поле, равное 1 см, 
    а левое и правое поля — равные 2 см</li>
    </ol>
    </body>
    
    </html>

Параметры полей в CSS

Определяют пространство между границей элемента и содержимым элемента, для которого не предусмотрены отрицательные значения. Все поля (верхнее, правое, нижнее и левое) можно изменять независимо друг от друга. Существует также параметр padding, который позволяет определять нескольких полей в одном объявлении.

Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр Описание Значения IE F N W3C
padding Параметр для задания всех полей в одном объявлении padding-top 4 1 4 1
padding-right
padding-bottom
padding-left
padding-bottom Задает нижнее поле элемента length 4 1 4 1
%
padding-left Задает левое поле элемента length 4 1 4 1
%
padding-right Задает правое поле элемента length 4 1 4 1
%
padding-top Задает верхнее поле элемента length 4 1 4 1
%
< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия