Основы работы с CSS

Поля в CSS

Разбить на страницы
Показывать лекцию целиком

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

Примеры

  • Этот пример показывает, как задать левое поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-left: 0.5cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Этот пример показывает, как задать правое поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-right: 3cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Этот пример показывает, как задать верхнее поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-top: 1cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Этот пример показывает, как задать нижнее поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-bottom: 2.5cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Пример показывает, как с помощью параметра 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
    %

    Поля в CSS: подробное рассмотрение

    Параметр 'padding'

    Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    padding-top Устанавливает поля. Значения задаются в % (определяет поле в % от ширины ближайшего элемента) и длиной (определяет фиксированное поле)
    padding-right
    padding-bottom
    padding-left

    Примеры:

    p {padding: 2px}

    для всех четырех сторон будет задано поле 2px.

    p {padding: 5% 2px}

    верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины ближайшего элемента.

    p {padding: 2px 7px 5%}

    верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего элемента, нижнее поле будет 5%.

    p {padding: 2px 5% 7px 5px}

    верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее поле будет 7px, левое поле будет 5px.

    Параметр 'padding-bottom'

    Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное нижнее поле
    % Определяет нижнее поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-bottom: 5%
}

    Параметр 'padding-left'

    Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное левое поле
    % Определяет левое поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-left: 2px
}

li
{ 
padding-left: 5%
}

    Параметр 'padding-right'

    Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное правое поле
    % Определяет правое поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-right: 2px
}

    Параметр 'padding-top'

    Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное верхнее поле
    % Определяет верхнее поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-top: 2px
}
    Страницы:

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

    Примеры

  • Этот пример показывает, как задать левое поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-left: 0.5cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Этот пример показывает, как задать правое поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-right: 3cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Этот пример показывает, как задать верхнее поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-top: 1cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Этот пример показывает, как задать нижнее поле элементов списка.
    <html>
<head>
<style type="text/css">
li {padding-bottom: 2.5cm}
</style>
</head>

<body>
<ol>
<li>элемент списка</li>
<li>элемент списка</li>
<li>элемент списка</li>
</ol>
</body>

</html>
  • Пример показывает, как с помощью параметра 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
    %

    Поля в CSS: подробное рассмотрение

    Параметр 'padding'

    Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    padding-top Устанавливает поля. Значения задаются в % (определяет поле в % от ширины ближайшего элемента) и длиной (определяет фиксированное поле)
    padding-right
    padding-bottom
    padding-left

    Примеры:

    p {padding: 2px}

    для всех четырех сторон будет задано поле 2px.

    p {padding: 5% 2px}

    верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины ближайшего элемента.

    p {padding: 2px 7px 5%}

    верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего элемента, нижнее поле будет 5%.

    p {padding: 2px 5% 7px 5px}

    верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее поле будет 7px, левое поле будет 5px.

    Параметр 'padding-bottom'

    Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное нижнее поле
    % Определяет нижнее поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-bottom: 5%
}

    Параметр 'padding-left'

    Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное левое поле
    % Определяет левое поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-left: 2px
}

li
{ 
padding-left: 5%
}

    Параметр 'padding-right'

    Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное правое поле
    % Определяет правое поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-right: 2px
}

    Параметр 'padding-top'

    Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.

    Наследование: нет.

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

    Значение Описание
    Length Определяет фиксированное верхнее поле
    % Определяет верхнее поле в % от высоты ближайшего элемента

    Пример:

    li
{ 
padding-top: 2px
}
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^