Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Padding Padding-bottom

Свойство padding

Описание

Свойство padding задает расстояние (ширину полей) от границ блока до его содержимого для всех или только для указанных сторон.

Это свойство применимо ко всем элементам.

Структура блока

Значение

Значение задается в единицах длины, принятых в CSS (подробнее здесь...) или в %,

- auto – автоматически задается браузером,

- inherit - принимает значение свойства родительского элемента.

При задании ширины полей допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:

Количество значений Результат
1 Ширина полей от всех границ элемента до его содержимого одинакова.
2 Первое значение устанавливает ширину полей от верхней и нижней границ, второе – от боковых границ элемента.
3 Первое значение устанавливает ширину поля от верхней границы, второе – от боковых границ, а третье значение – от нижней границы элемента.
4 Значения поочередно устанавливают ширину полей от верхней, правой, нижней и левой границ элемента.

Таким образом свойство padding объединяет в себе свойства padding-top , padding-right , padding-bottom и padding-left , которые устанавливают поля от каждой из границ элемента индивидуально.

Значение по умолчанию

- auto или 0


Пример

Пример - Свойство padding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство padding </title>
</head>
<body>

<p style="background-color:#00FF99; border:#330066 solid 2px; padding:10px;"> Поля от содержимого абзаца - в данном случае от текста, до его границ составляют 10 пикселей. </p>
<p style="border:#FF3300 solid 1px; width:300px; padding:10px 40px;"> Поля от верхней и нижней границ составляют 10 пикселей; от боковых границ - 40 пикселей. </p>

</body>
</html>

При просмотре в браузере

Поля от содержимого абзаца - в данном случае от текста, до его границ составляют 10 пикселей.

Поля от верхней и нижней границ составляют 10 пикселей; от боковых границ - 40 пикселей.

И еще. Так как поля располагаются внутри блока, то фон блока или его фоновое изображение на них распространяются.

Для строчных элементов...

Хотелось бы отметить, что свойство padding в основном применяется к блочным элементам и к тегу <img>.

И, как Вы уже, наверное догадались, представленное описание этого свойства относится именно к блочным элементам.

Свойство padding можно применить и к строчным элементам, но это случается крайне редко и вряд ли кем-то используется. Возможно Я не прав, но судите сами:


Пример - Свойство padding и строчные элементы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство padding и строчные элементы </title>
</head>
<body>

<p style="border:#CC0033 solid 2px; padding:10px;"> Абзац - это блочный элемент. </p>
<span style="border:#CC0033 solid 2px; padding:20px;"> Это строчный элемент. Поля - 20 пикселей. </span>

<p> 1. <u> Добавим еще один строчный элемент. Без применения стилей: </u> </p>
<span> Строчный элемент. </span> <span> Строчный элемент. </span>

<p> 2. <u> Добавим оформление: </u> </p>
<strong style="border:#CC0033 solid 2px; padding:10px;"> Строчный элемент. </strong> <span style="border:#CC0033 solid 2px; padding:10px;"> Строчный элемент. </span>

<p> 3. <u> Без границ. Только отступы. </u> </p>
<span style="padding:10px;"> Строчный элемент. </span> <span style="padding:10px;"> Строчный элемент. </span>

<p> 4. <u> Перенос строчного элемента! </u> </p>
<span style="border::#CC0033 solid 2px; padding:10px;"> Строчный элемент. </span> <br>
<span style="border:#CC0033 solid 2px; padding:10px;"> Строчный элемент. </span>

<p> 5. <u> В случае с блочными элементами: </u> </p>
<p style="border:#CC0033 solid 2px; padding:10px;"> Абзац </p>
<p style="border:#CC0033 solid 2px; padding:10px;"> Абзац </p>

</body>
</html>

При просмотре в браузере

Абзац - это блочный элемент.

Это строчный элемент. Поля - 20 пикселей.

1. Добавим еще один строчный элемент. Без применения стилей:

Строчный элемент. Строчный элемент.

2. Добавим оформление:

Строчный элемент. Строчный элемент.

3. Без границ. Только отступы.

Строчный элемент. Строчный элемент.

4. Перенос строчного элемента!

Строчный элемент.
Строчный элемент.

5. В случае с блочными элементами:

Абзац

Абзац

Как видите, получается сумбур какой-то. Без комментариев.

Попробуйте поэкспериментировать (в том числе и со свойствами padding-top, padding-right, padding-bottom и padding-left), почитайте о блочных и строчных элементах (подробнее здесь...), и на практике, с опытом Вы сами все поймете!


Свойство Overflow Свойство Padding Свойство Padding-bottom
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru