Содержание

padding — CSS | MDN

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

Cвойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (padding-top, padding-right, padding-bottom, padding-left).

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Проценты		ссылается на ширину содержащего блока
Обработка значениякак и у каждого из подсвойств этого свойства:
  • padding-bottom: процент, как указан, или аблосютная длина
  • padding-left: процент, как указан, или аблосютная длина
  • padding-right: процент, как указан, или аблосютная длина
  • padding-top: процент, как указан, или аблосютная длина
Animation typeдлина

padding: 1em;


padding: 5% 10%;


padding: 1em 2em 2em;


padding: 2px 1em 0 1em;


padding: inherit;
padding: initial;
padding: unset;

Значения

Укажите одно, два, три или четыре следующих значения:

<length>
Устанавливает неотрицательный, фиксированый размер. Подробнее в разделе <length>.
<percentage>
Относительно ширины родительского блока.
  • Одно значение применяется ко всем четырем сторонам
  • Два значения применяются: 1. верхняя и нижняя и 2. левая и правая стороны
  • Три значения применяются: 1.
    верхняя, 2. левая и правая и 3. нижняя стороны
  • Четыре значения применяются: 1. верхняя, 2. правая, 3. нижняя и 4. левая стороны

Формальное описание синтаксиса

 padding: 5%;                

 padding: 10px;              

 padding: 10px 20px;         
                             

 padding: 10px 3% 20px;      
                             
                             

 padding: 1em 3px 30px 5px;

border:outset; padding:5% 1em;

HTML

<h5>Hello world!</h5>
<h4>The padding is different in this line. </h4>

CSS

h5{
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h4{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}

Live Sample Link

BCD tables only load in the browser

padding-left | htmlbook.ru

Internet Explorer		ChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

 1).

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

Синтаксис

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-left</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
   }
   .layer p {
    margin: 0; /* Убираем отступы вокруг */
    padding-left: 10%; /* Поле слева */
   }
  </style>
 </head>
 <body> 
  <div>
   <p>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.
 
 </p>
  </div>
 </body>
</html>

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

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

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

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

Браузеры

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

padding | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

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

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

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

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

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid black;  /* Параметры рамки */
    padding: 20px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>
   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.
 
 
  </div>
 </body>
</html>

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

Рис. 2. Применение свойства padding

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

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

Браузеры

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

CSS padding-left



Пример

Установите левое заполнение для элемента <p> до 50 пикселей:

p.ex1 {
    padding-left: 50px;
}

Подробнее примеры ниже.

Определение и использование

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

Свойство padding-left задает левое заполнение (пробел) элемента.

Примечание: Отрицательные значения не допускаются.

Значение по умолчанию:0
Inherited:no
Animatable:yes. Читайте о animatable
Version:CSS1
Синтаксис JavaScript: object. style.paddingLeft=»50px»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
padding-left1.04.01.01.03.5

Синтаксис CSS

padding-left: length|initial|inherit;

Значения свойств

ЗначениеОписание
lengthЗадает фиксированное левое заполнение в пикселах, PT, cm и т.д. Значение по умолчанию — 0. Читать о единицах длины
%Задает левое заполнение в процентах от ширины элемента
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Установите левое заполнение для элемента <p> до 10% ширины элемента:

p.ex1 {
    padding-left: 10%;
}

Пример

Установите левое заполнение для элемента <p> на 2 EM:

p.ex1 {
    padding-left: 2em;
}

Похожие страницы

CSS Справочник: CSS Padding

HTML DOM Справочник: paddingLeft Свойство


Свойство padding | CSS справочник

CSS свойства

Определение и применение

CSS свойство padding устанавливает величину внутренних отступов элемента в одном объявлении.

CSS свойство padding объединяет в себе такие свойства как padding-top, padding-right, padding-bottom и padding-left. Это свойство может иметь от одного до четырех значений.

На изображении светло-серым цветом обозначена зона за которую отвечает свойство padding:

  1. При указании четырёх значений (5px 10px 15px 20px) — порядок расстановки внутренних отступов будет следующий: Top(5px) — Right(10px) — Bottom(15px) — Left(20px). Для запоминания порядка расстановки внутренних отступов в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).

  2. При указании трёх значений (5px 10px 15px) — порядок расстановки внутренних отступов будет следующий: Top (5px) — Right & Left (10px) — Bottom (15px).

  3. При указании двух значений (5px 10px) — первое значение(5px) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе (10px) значение — внутренние отступы слева и справа содержимого элемента.

  4. При указании одного значения (5px) — внутренний отступ со всех сторон будет одного размера — 5px.

Поддержка браузерами

CSS синтаксис:

padding:"length | initial | inherit";

JavaScript синтаксис:

object.style.padding = "5px"

Значения свойства

ЗначениеОписание
lengthОпределяет внутренний отступ элемента в пикселях, см и др. единицах. Значение по умолчанию 0.
Отрицательные значения не допускаются.
%Определяет внутренний отступ элемента в процентах от содержащего блока родительского элемента.
Отрицательные значения не допускаются.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
.primer {
width  : 33%; /* задаём ширину блока */
background-color : orange; /* задаём цвет заднего фона */
padding : 15px 100px 5px; /* Порядок расстановки внутренних отступов будет следующий: Top (15px) - Right & Left (100px) - Bottom (5px). */
}
.primer1 {
width  : 33%; /* задаём ширину блока */
background-color : yellow; /* задаём цвет заднего фона */
padding : 25px; /* величина внутреннего отступа со всех сторон будет одного размера - 25px.  */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width  : 33%; /* задаём ширину блока */
background-color : lime; /* задаём цвет заднего фона */
padding : 25px 75px; /* певое значение(25px) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе (75px) значение - внутренние отступы слева и справа содержимого элемента.  */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width  : 33%; /* задаём ширину блока */
background-color : blue; /* задаём цвет заднего фона */
padding : 40px 25px 25px 100px; /* порядок расстановки внутренних отступов будет следующий: Top(40px) - Right(25px) - Bottom(25px) - Left(100px). */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
	<body>
		<div class = "primer">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
		<div class = "primer1">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
		<div class = "primer2">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
		<div class = "primer3">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	</body>
</html>
Пример использования внутренних отступов элемента.CSS свойства

padding-left. CSS стиль для задания полей

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

Краткая информация по CSS-свойству padding-left

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам

Правила написания свойства padding-left

padding-left: <размер>;

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

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

Объект.style.paddingLeft

Пример применения стиля padding-left

Проиллюстрируем работу padding-left на примере. Нам нужно, чтобы поле слева было больше, чем с других сторон. Это необходимо, чтобы текст не залезал на фоновый рисунок.

Применение свойства padding-left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля padding-left</title>
<style>
 article {
   /* Параметры фона */
   background: url(/fon.png) no-repeat 100% 0;

   /* Параметры рамки */
   border: 2px solid #000000;

   /* Поля вокруг текста */
   padding: 5px;

   /* Поле слева */
   padding-left: 90px;
 }
</style>
</head>
<body> 
  <article>
   Нам нужно, чтобы поле слева было больше, 
   чем с других сторон.  В этом нам поможет
   CSS свойство padding-left.
  </article>
</body>
</html>

Вместо того, чтобы писать padding: 5px;, а потом padding-left: 90px; нам бы следовало написать padding: 5px 5px 5px 90px;. Так намного короче и показывает более высокий уровень верстки.

Свойство margin, padding: поля и отступы элемента. Справочник CSS

Содержание:

Свойство MARGIN

СвойствоЗначенияПр*Нc*
margin[ ДЛИНА, %, auto ]{1,4}, inherit+—
margin-bottom
margin-left
margin-right
margin-top		ДЛИНА, %, auto, inherit+—

Сокращённая форма записи свойств, которые задают ширину всего поля элемента (внешний отступ) или полей по отдельности, с каждой стороны. Вот схема блочного элемента css, где визуально представлены поля и отступы, рамка, и не забываем, что для разных версий html различные браузеры определяют ширину и высоту элемента по-своему:

Значения:

Подходят любые единицы CSS, допускаются отрицательные значения. Одно значение задает общую ширину поля. Два значения: 1-ое — для верхнего и нижнего поля, 2-ое — для левого и правого. Три значения: 1-ое — для верхнего, 2-ое — для левого и правого, 3-е — для нижнего. Четыре значения установят ширину полей в следующем порядке: верхнее, правое, нижнее, левое, следуя стандартному порядку в CSS:

{ margin: 10px 20px 10px 20px;} — равнозначно: { margin: 10px 20px;}
{ margin: -10px 20px 35px 20px;} — равнозначно: { margin: -10px 20px 35px;}

• % — относительно ширины или высоты родительского элемента.
• auto — определяется браузером автоматически, см. примеры.
• inherit — наследование свойств родителя.

Свойства margin-bottom, margin-left,
margin-right, margin-top

Эти свойства задают ширину каждого поля по отдельности, для каждой из сторон элемента.
Значения: как у свойства margin, допустимо использовать одно значение.

Пример:

.element { margin-top: 2em; margin-left: 2em} — для элемента задано верхнее и левое поле шириной 2em.

Горизонтальные поля

Пример:

.blok { width: 300px; background: #f0f0f0;}
.element { width: 220px; margin-right: 20px; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border: 2px solid #000; background: #ff9}
— родительский блок шириною 300px; а для элемента задана ширина 220px и горизонтальные поля, правое — 20px, левое со значением auto, которое рассчитано браузером, как равное 60px (300 — 220 — 20 = 60):

Если всем трём свойствам: Width, Margin-left и Margin-right присвоить значения, отличные от auto, то свойству Margin-right будет принудительно присвоено значение auto. На практике это будет означать, что его значение дополнит общую ширину элемента до ширины родительского блока.

Если значение auto установлено для всех трёх свойств, то поля станут равняться нулю, а ширина Width станет максимальной. Если значение свойства Width задано явно, а оба поля имеют значение auto, то для них устанавливается одинаковая величина, а элемент центрируется в границах родителя, т.е. происходит его выравнивание по центру:

Особенности вертикального форматирования

Значение auto переопределится в 0, если оно задано для свойств Margin-top и Margin-bottom блочного элемента в нормальном потоке. Есть ещё одна особенность вертикального форматирования: у блочных элементов происходит перекрытие смежных вертикальных полей.

Скажем, если для элементов списка заданы значения вертикальных полей: li { margin: 15px 0 20px 0;}, то, казалось бы, что расстояние между двумя элементами списка должно быть 35px: 15px (нижнее поле предыдущего) + 20px (своё верхнее поле), — а оно будет 20px. Меньшее из полей игнорируется в пользу большего:

Свойство PADDING

СвойствоЗначенияПр*Нc*
padding[ ДЛИНА, % ]{1,4}, inherit+—
padding-bottom
padding-left
padding-right
padding-top		ДЛИНА, %, inherit+—

Сокращённая форма записи свойств, она задаёт ширину общего отступа элемента (внутренний отступ) или величину отступов с каждой стороны по отдельности.

Значения:

Как у свойства Margin, только не допускаются отрицательные значения, и отсутствует значение auto, например:

{ padding: 20px 20px 20px 20px;} — равнозначно: { padding: 20px;}
{ padding: 5px 20px 35px 20px;} — равнозначно: { padding: 5px 20px 35px;}

Пример:

. blok { width: 300px; background: #f0f0f0;}
.element { padding: 10px 20px; width: 220px; margin: 5px auto; border: 2px solid #000; background: #ff9}
— для элемента задано свойство Padding, верхний и нижний отступы 10px, левый и правый отступы 20px:

Свойства padding-bottom, padding-left,
padding-right, padding-top

Эти свойства задают ширину отступов по отдельности, для каждой стороны элемента.
Значения: как у свойства Padding, только с одним значением.

Пример:

.element { padding-left: 5%; padding-right: 5%}
— для элемента заданы левый и правый отступы равные 5% ширины его родителя.

Содержание:

Поделиться с друзьями:

padding-left — CSS: каскадные таблицы стилей

Свойство CSS padding-left устанавливает ширину области заполнения слева от элемента.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Область заполнения элемента — это пространство между его содержимым и границей.

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

 
отступ слева: 0,5 м;
отступ слева: 0;
обивка слева: 2 см;


отступ слева: 10%;


обивка слева: наследование;
padding-left: начальный;
padding-left: не задано;

Свойство padding-left задается как одно значение, выбранное из списка ниже. В отличие от полей, отрицательные значения не допускаются для заполнения.

Значения

<длина>
Размер заполнения как фиксированное значение. Должен быть неотрицательным.
<процент>
Размер заполнения в процентах относительно ширины содержащего блока. Должен быть неотрицательным.
Начальное значение 0
Применимо к всем элементам, кроме table-row-group , table-header-group , table-footer-group , table -row , таблица-столбец-группа и таблица-столбец .Это также относится к :: первая буква и :: первая строка .
Унаследовано нет
Проценты относятся к ширине содержащего блока
Вычисленное значение указанное процентное значение или абсолютная длина
Тип анимации длина

Установка левого отступа с использованием пикселей и процентов 

 . содержание {padding-left: 5%; }
.sidebox {padding-left: 10 пикселей; }

Таблицы BCD загружаются только в браузере

padding-left | Codrops

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

Каждый элемент на веб-странице прямоугольный.Каждый элемент имеет модель прямоугольного блока, которая описывает каждый из прямоугольных блоков (областей), сгенерированных для элемента: поле содержимого , поле заполнения , поле границы и поле поля . Поле содержимого существует для каждого элемента. Поля заполнения, границы и поля являются необязательными, и их существование зависит от того, применяете ли вы к элементу заполнение, границу или поле.

Блочная модель элемента в CSS включает области содержимого, отступов, границ и полей.

Общая информация и заметки

Заполнение элемента обычно используется для вычисления ширины и высоты элемента. Ширина обычно равна ширине области содержимого (задается с помощью свойства width ) плюс ширина области заполнения. Например, если для ширины элемента задано значение «300 пикселей», а ширина его заполнения (слева и справа) в сумме составляет «60 пикселей», то общая вычисленная ширина элемента будет равна «360 пикселей», а не 300 пикселей. ‘.То же самое относится и к вычисленной высоте элемента.

Этот расчет высоты и ширины элемента может измениться, если свойство box-sizing используется со значением border-box . В этом случае ширина заполнения будет включена в ширины элемента, и поэтому ширина заполнения будет вычтена из заданного значения ширины элемента. Например, если ширина элемента установлена ​​на «300 пикселей» с использованием свойства width , а его ширина заполнения установлена ​​на «60 пикселей», тогда общая ширина останется «300 пикселей», а ширина области содержимого элемент уменьшится с 300 пикселей до 240 пикселей.

Использование box-sizing: border-box; и теперь является рекомендуемой практикой в ​​CSS.

Подробнее об этом можно прочитать в записи свойства box-sizing . Также см. Демонстрационный раздел ниже для живого примера.

Значения

<длина>
См. Запись для получения списка возможных значений.
<процент>
См. Запись <процент> для списка возможных значений.Процентное значение рассчитывается относительно ширины содержащего блок элемента.

Банкноты

Заполнение не может быть отрицательным. Элемент также может наследовать свое значение заполнения от родительского, используя ключевое слово inherit . Например:

.element {
    обивка слева: наследование;
}

Примеры

Следующее устанавливает левое заполнение элемента:

. container {
    отступ слева: 30 пикселей;
}

.container-2 {
    отступ слева: 15%;
}

.sub-container {
    обивка слева: наследование;
}

Поддержка браузера

Свойство padding-left работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.

CSS padding-left

Пример <стиль> стол { ширина: 70вв; высота: 70vh; } td { ширина: 50%; фон: золото; выравнивание текста: слева; } .padded { отступ слева: 10vh; } <таблица> С набивкой Без дополнений

Свойство CSS padding-left используется для применения заполнения к левой стороне элемента.

См. Также свойства padding , padding-right , padding-top и padding-bottom .

Синтаксис

padding-left: [<длина> | <процент>]

Возможные значения

длина
Позволяет указать неотрицательное значение длины в качестве толщины заполнения.Отрицательные значения недопустимы.
процентов
Позволяет указать неотрицательное значение % в качестве толщины заполнения. Отрицательные значения недопустимы.

CSS3 предлагает удалить проценты как возможное значение заполнения. Он также предлагает отрицательные значения, а также значение auto . Однако на момент написания эта спецификация находится в стадии черновика, поэтому они могут быть включены или могут быть включены в официальную спецификацию.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:

начальная
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как при наследовании или как при начальном , в зависимости от того, унаследовано свойство или нет.Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Общая информация

Начальное значение
0
Относится к

CSS3 утверждает, что это свойство применяется ко всем элементам. Однако CSS2 указывает все элементы, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column .

Унаследовано?
Нет
СМИ
Визуальный
Анимационный
Да (см. Пример)

Пример кода

td { отступ слева: 20 пикселей; }

Официальные спецификации

Свойство заполнения CSS


Пример

Установите отступ для всех четырех сторон элемента

на 35 пикселей:

п {
отступ: 35 пикселей;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

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

Свойство padding — это сокращенное свойство padding-top, padding-right, padding-bottom и padding-left свойства.

Примечание. Padding создает дополнительное пространство внутри элемента, а margin создает дополнительное пространство вокруг элемента.

Это свойство может иметь от одного до четырех значений.

Если свойство padding имеет четыре значения:

  • padding: 10px 5px 15px 20px;
    • верхний отступ 10px
    • отступ справа — 5 пикселей
    • нижний отступ 15px
    • отступ слева — 20 пикселей

Если свойство padding имеет три значения:

  • отступ: 10 пикселей 5 пикселей 15 пикселей;
    • верхний отступ 10px
    • правое и левое отступы 5 пикселей
    • нижний отступ 15px

Если свойство padding имеет два значения:

  • отступ: 10 пикселей 5 пикселей;
    • верхний и нижний отступы 10 пикселей
    • правое и левое отступы 5 пикселей

Если свойство padding имеет одно значение:

  • отступ: 10 пикселей;
    • все четыре поля имеют размер 10 пикселей

Примечание. Отрицательные значения не допускаются.

Значение по умолчанию: 0
Унаследовано: нет
Анимация: да, см. Отдельные свойства . Прочитать про animatable Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.padding = «100px 20px» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
набивка 1,0 4,0 1,0 1,0 3,5

Синтаксис CSS

заполнение: длина | начальный | наследование;

Значения свойств

Другие примеры

Пример

Установите отступ для элемента

на 35 пикселей сверху и снизу и на 70 пикселей для правого и левого:

п {
отступ: 35 пикселей 70 пикселей;
}

Попробуй сам »

Пример

Установите отступ для элемента

на 35 пикселей для верхнего, 70 пикселей для правого и левого и до 50 пикселей для нижнего:

п {
отступ: 35 пикселей 70 пикселей 50 пикселей;
}

Попробуй сам »

Пример

Установите отступ для элемента

на 35 пикселей для верха, 70 пикселей для правого, 50 пикселей для нижнего и до 90 пикселей для левого:

п {
отступ: 35px 70px 50px 90px;
}

Попробуй сам »

связанные страницы

Учебное пособие по CSS: CSS Padding

Учебник

CSS: модель коробки CSS

Ссылка на HTML DOM: заполнение недвижимость


Свойство

CSS padding-left — Tutorial Republic

Тема: Справочник по свойствам CSS3 Пред. | След.

Описание

Свойство CSS padding-left устанавливает отступ слева i.е. количество пространства между левой границей и содержимым элемента. Однако во многих случаях сокращенное свойство CSS padding удобнее и предпочтительнее.

В следующей таблице приведены контекст использования и история версий этого свойства.

Синтаксис

Синтаксис свойства задается следующим образом:

В примере ниже показано свойство padding-left в действии.

  h2 {
    отступ слева: 2em;
}
п {
    отступ слева: 50 пикселей;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
длина Задает отступ как значение длины в пикселей , пикселей , см , em и т. Д.Отрицательные значения длины не допускаются.
в процентах Задает заполнение в процентах. Процент рассчитывается относительно ширины содержащего блок элемента. Отрицательные значения в процентах не допускаются.
начальный Устанавливает для этого свойства значение по умолчанию.
наследовать Если указано, связанный элемент принимает вычисленное значение свойства родительского элемента padding-left.

Совместимость с браузером

Свойство padding-left поддерживается во всех основных современных браузерах.

Базовая поддержка -

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Дополнительная литература

См. Руководство по: CSS Padding, CSS Box Model.

Связанные свойства: padding , padding-top , padding-right , padding-bottom .

Справочное руководство

CSS: отступы - блог LogRocket

1 мин чтения 452

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

Вперед:

Свойство padding можно указать с помощью длины, процентов и ключевых слов, например auto . Он также может принимать отрицательные значения.

Демо

См. Pen
CSS Padding Example by Solomon Eseme (@kaperskyguru)
on CodePen.

Синтаксис 

 div {
  заполнение: <длина> | <процент> | авто
}

Сокращенное свойство CSS padding используется для определения до четырех значений для padding-top , padding-right , padding-left и padding-bottom .

 div {
  отступ: 2px 3px 4px 5px;
}

Эквивалент padding можно определить следующим образом:

 div {
 padding-top: 2 пикселя;
 отступ справа: 3 пикселя;
 отступ слева: 5 пикселей;
 padding-bottom: 4px;
}

Значения

Свойство padding может принимать от одного до четырех значений.

Одно значение

Когда одно значение предоставляется сокращенному свойству CSS padding , оно применяет одно и то же значение padding ко всем четырем сторонам.

 div {
  отступ: 5 пикселей;
}
 // ТАКОЙ ЖЕ КАК
div {
 padding-top: 5 пикселей;
 отступ справа: 5 пикселей;
 отступ слева: 5 пикселей;
 padding-bottom: 5 пикселей;
}

Два значения

Если для свойства padding заданы два значения, первое значение применяется к верхнему и нижнему отступу, а второе - к левому и правому.

 div {
  отступ: 5px 3px;
}
 // ТАКОЙ ЖЕ КАК
div {
 padding-top: 5 пикселей;
 отступ справа: 3 пикселя;
 отступ слева: 3 пикселя;
 padding-bottom: 5 пикселей;
}

Три значения

Если указаны три значения, первое значение применяется к верхнему заполнению; второе значение применяется к левому и правому отступу; а третье значение применяется к нижнему отступу.

 div {
  отступ: 5px 3px 1px;
}
 // ТАКОЙ ЖЕ КАК
div {
  padding-top: 5 пикселей;
  отступ справа: 3 пикселя;
  отступ слева: 3 пикселя;
  padding-bottom: 1px;
}

Четыре значения

Если указаны четыре значения, значения применяются по часовой стрелке. Другими словами: первое значение применяется к верхнему отступу; второе значение применяется к правому отступу; третье значение наносится снизу; а четвертый - значение применяется к левому отступу.

 div {
  отступ: 5px 3px 1px 6px;
}
 // ТАКОЙ ЖЕ КАК
div {
  padding-top: 5 пикселей;
  отступ справа: 3 пикселя;
  отступ слева: 6 пикселей;
  padding-bottom: 1px;
}

Центрирующие элементы

С помощью ключевого слова auto очень легко центрировать элементы в контейнере с помощью свойства padding .

 div {
  заполнение: 2em auto; / * сверху и снизу: отступ 2em * /
                    / * Коробка центрируется по горизонтали * /
}

div {
  обивка: авто; / * сверху и снизу: 0 отступ * /
                  / * Коробка центрируется по горизонтали * /
}

Отрицательные значения

Когда отрицательные значения передаются в заполнение , они тянут элемент в определенном направлении, а не толкают его.

Например, приведенный ниже фрагмент будет тянуть элемент к верхнему на 5 пикселей, к справа на 3 пикселя, к слева на 6 пикселей и к нижнему на 1 пиксель.

 div {
  отступы: -5px -3px -1px -6px;
}

Ваш интерфейс загружает процессор ваших пользователей?

По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket. Https://logrocket.com/signup/

LogRocket похож на DVR для веб-приложений , записывая все, что происходит в вашем веб-приложении или на сайте.Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить пользовательские сеансы вместе с состоянием приложения, регистрировать сетевые запросы и автоматически обнаруживать все ошибки.

Модернизируйте отладку веб-приложений - начните мониторинг бесплатно.

CSS Padding - Урок CSS

Свойство CSS Padding определяет пространство между границей элемента и его содержимым.Отступы (сверху, справа, снизу, слева) можно установить со всех четырех сторон элемента.

Свойство заполнения CSS

Значения свойства заполнения допускают длину или процентные значения, но отрицательные значения не допускаются.

На следующей схеме показана взаимосвязь между заполнением и полем, а красная линия - это граница элемента.

Например, вы можете установить отступ всех элементов

на 10 пикселей: 

  h2 {
    отступ: 10 пикселей;
}

Вы также можете установить отступ для каждой стороны в порядке сверху, справа, снизу и слева, например:

  h3 {
    отступ: 20 пикселей 30 пикселей 30 пикселей 20 пикселей;
}

Отдельные стороны

Вы можете использовать следующие свойства CSS для установки четырех сторон отступа соответственно:

  • утеплитель
  • обивка правая
  • обивка нижняя
  • обивка левая

Эти четыре свойства можно использовать вместе в правиле CSS, например:

  h3 {
    padding-top: 20 пикселей;
    отступ справа: 30 пикселей;
    padding-bottom: 30 пикселей;
    отступ слева: 20 пикселей;
}

Вы также можете использовать свойство padding, чтобы установить четыре боковых отступа одновременно:

  h3 {
    отступ: 20 пикселей 30 пикселей 30 пикселей 20 пикселей;
}

Копия значения

Копия значения заполнения и копия значения поля имеют одинаковый принцип. Вы можете обратиться к CSS Margins.

отступ: 25 пикселей 50 пикселей 75 пикселей 100 пикселей;

  • padding-top 25px
  • padding-right - 50 пикселей
  • padding-bottom - 75 пикселей
  • padding-left: 100 пикселей

отступы: 25 пикселей, 50 пикселей, 75 пикселей;

  • padding-top 25px
  • padding-right и padding-left - 50 пикселей
  • padding-bottom - 75 пикселей

отступы: 25 пикселей 50 пикселей;

  • padding-top и padding-bottom - 25 пикселей
  • padding-right и padding-left - 50 пикселей

отступ: 25 пикселей;

  • padding-top, padding-right, padding-bottom и padding-left - все 25 пикселей.

Заполнение и ширина элемента

Свойство CSS width определяет ширину области содержимого элемента. Область содержимого - это часть внутри отступа, границы и поля элемента (блочная модель).

Итак, если элемент имеет указанную ширину, добавленное к этому элементу заполнение будет добавлено к общей ширине элемента. Часто это нежелательный результат.

В следующем примере элементу

задана ширина 300 пикселей.Однако фактическая ширина визуализируемого элемента
будет 350 пикселей (300 пикселей + 25 пикселей левого поля + 25 пикселей правого поля):

  div {
    ширина: 300 пикселей;
    отступ: 25 пикселей;
}

Чтобы сохранить ширину 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Это заставляет элемент сохранять свою ширину; если вы увеличите заполнение, доступное пространство для содержимого уменьшится. Вот пример:

  div {
    ширина: 300 пикселей;
    отступ: 25 пикселей;
    размер коробки: рамка-рамка;
}
.

No related posts.