Что такое padding в html
Перейти к содержимому

Что такое padding в html

  • автор:

Свойство padding

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

Синтаксис

Количество параметров

Свойство padding принимает 1 , 2 , 3 или 4 значения, перечисляемые через пробел:

Количество Описание
1 Одно значение задает отступ со всех сторон элемента.
2 Первое значение задает отступ сверху и снизу, а второе — справа и слева.
3 Первое значение задает отступ сверху, второе — справа и слева, а третье — снизу.
4 Первое значение задает отступ сверху, второе — справа, третье — снизу, а четвертое — слева.

Пример

В данном случае по умолчанию внутренний отступ будет нулевой и текст будет прижат к границе блока:

какой-то текст.

#elem < padding: 0; width: 300px; border: 1px solid black; text-align: justify; >

Пример

А теперь давайте сделаем внутренний отступ в 30px :

какой-то текст.

#elem < padding: 30px; width: 300px; border: 1px solid black; text-align: justify; >

Пример

Сейчас отступ сверху и снизу будет 20px , а справа и слева — 5px :

какой-то текст.

#elem < padding: 20px 5px; width: 300px; border: 1px solid black; text-align: justify; >

Пример

Сейчас отступ сверху 5px , справа — 15px , снизу — 25px , слева — 35px :

какой-то текст.

#elem < padding: 5px 15px 25px 35px; width: 300px; border: 1px solid black; text-align: justify; >

Смотрите также

  • свойство margin ,
    которое задает внешний отступ

padding¶

Свойство padding устанавливает значение полей вокруг содержимого элемента.

Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* Apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 1em; /* Global values */ padding: inherit; padding: initial; padding: unset; 

Значения¶

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

Табл. 1. Зависимость от числа значений

Число значений Результат
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.

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

Применяется ко всем элементам

Спецификации¶

  • CSS Basic Box Model
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
 html> head> meta charset="utf-8" /> title>paddingtitle> style> .layer  background: #fc3; /* Цвет фона */ border: 2px solid black; /* Параметры рамки */ padding: 20px; /* Поля вокруг текста */ > style> head> body> div class="layer"> Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. div> body> html> 

Свойство padding

Сокращенная запись для определения внутреннего отступа у элемента. Включает в себя свойства padding-top, padding-right, padding-bottom, padding-left.

padding: 15px 20px 15px 20px;

Пошаговый план! Как быстро научиться создавать сайты!
iOS Safari

Значения

Убирает все внутренние отступы у элемента

padding: 10px;

Используя один параметр. Задает внутренний отступ со всех сторон

 .example-1 

Содержимое блока
padding: 10px 20px;

Используя два параметра. Первый — внутренний отступ сверху и снизу, второй — внутренний отступ слева и справа

 .example-2 

Содержимое блока
padding: 15px 25px 25px;

Используя три параметра. Первый — внутренний отступ сверху, второй — внутренний отступ справа и слева, третий — внутренний отступ снизу

 .example-3 

Содержимое блока
padding: 10px 15px 10px 25px;

Используя четыре параметра. Первый — внутренний отступ сверху, второй — внутренний справа, третий — внутренний отступ снизу, четвертый — внутренний отступ слева

 .example-4 

padding-left

Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Синтаксис

padding-left: значение | проценты | inherit

Значения

Величину левого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    padding-left   
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Результат данного примера показан на рис. 2.

Применение свойства padding-left

Рис. 1. Применение свойства padding-left

Объектная модель

[window.]document.getElementById(» elementID «).style.paddingLeft

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *