Padding описание css: Свойство padding | Справочник HTML CSS – padding — Web technology for developers

Leave a Comment / Css / By /

Содержание

Padding внутренние отступы CSS уроки для начинающих академия


Этот элемент имеет заполнение 70px.


CSS заполнение

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

С помощью CSS вы имеете полный контроль над заполнением. Существуют свойства для настройки заполнения для каждой стороны элемента (сверху, справа, снизу и слева).

Обивка-отдельные стороны

CSS имеет свойства для указания заполнения для каждой стороны элемента:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Все свойства Padding могут иметь следующие значения:

  • length — задает заполнение в пикселах, PT, cm и т. д.
  • % — задает заполнение в% от ширины содержащего элемента
  • Наследование-указывает, что заполнение должно наследоваться от родительского элемента

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

В следующем примере устанавливается разное заполнение для всех четырех сторон элемента <div>:

Пример

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Заполнение-Сокращенное свойство

Чтобы сократить код, можно указать все свойства Padding в одном свойстве.

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

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

So, here is how it works:

If the padding property has four values:

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

Пример

div {
    padding: 25px 50px 75px 100px;

}

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

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

CSS свойства

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

CSS свойство padding-top устанавливает верхний внутренний отступ элемента.

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

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

CSS синтаксис:

padding-top:"length | initial | inherit";

JavaScript синтаксис:

object.style.paddingTop = "5px"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
.primer {
width : 33%; /* задаём ширину блока */
padding-top : 15px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 15px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 150px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : orange; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer1 {
width : 33%; /* задаём ширину блока */
padding-top : 25px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 25px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 5px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 25px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : yellow; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}

 .primer2 {
width : 33%; /* задаём ширину блока */
padding-top : 5px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom:25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 75px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : lime; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width : 33%; /* задаём ширину блока */
padding-top : 40px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 75px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 100px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : blue; /* задаём цвет заднего фона */
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-top | CSS | WebReference

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

Поле сверху от текста

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

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

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

Синтаксис 

padding-top: [<размер> | <проценты>]

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>padding-top</title> <style> .layer { background: #fc3; /* Цвет фона */ border-top: 5px solid #000; /* Параметры верхней линии */ border-bottom: 5px solid #000; /* Параметры нижней линии */ padding: 5px; /* Поля вокруг текста */ padding-top: 10%; /* Поле сверху */ padding-bottom: 10%; /* Поле снизу */ } </style> </head> <body> <div> Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. </div> </body> </html>

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

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

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

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

Объект.style.paddingTop

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

CSS свойства

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

CSS свойство padding-bottom устанавливает нижний внутренний отступ элемента.

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

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

CSS синтаксис:

padding-bottom:"length | initial | inherit";

JavaScript синтаксис:

object.style.paddingBottom = "5px"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
.primer {
width : 33%; /* задаём ширину блока */
padding-top : 15px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 15px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 150px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : orange; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer1 {
width : 33%; /* задаём ширину блока */
padding-top : 25px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 25px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 5px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 25px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : yellow; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}

 
.primer2 {
width : 33%; /* задаём ширину блока */
padding-top : 5px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom:25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 75px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : lime; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width : 33%; /* задаём ширину блока */
padding-top : 40px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 75px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 100px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : blue; /* задаём цвет заднего фона */
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 — Справочник CSS

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

С помощью данного свойства задаются пустые поля (внутренние отступы) внутри самого элемента.

Значения и синтаксис

  1. padding: [величина || %]  
padding: [величина || % || auto]

Значения могут задаваться в числах, процентах или других величинах, используемых в css. Если отступы заданы в процентах, то расчет будет вестись от размера родительского контейнера.

Количество значений может быть от одного до четырёх. См. таблицу ниже.

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

Примеры

Пример 1.
css:
  1. <style>  
  2.  .content {  
  3.   padding: 15px;   
  4.   border: 3px dashed #000000;    
  5.   background: #f0f0ee;   
  6.  }  
  7. </style>  
<style> .content { padding: 15px; /* Пустые поля внутри блока */ border: 3px dashed silver; /* Параметры рамки */ background: #d7d3cb; /* Цвет фона */ } </style>
html:
  1. <div class=»content»>    
  2. Персональный компьютер, ПК (англ. personal computer, PC), ПЭВМ (персональная электронно-вычислительная машина) — компьютер, предназначенный для эксплуатации одним пользователем. К ПК условно можно отнести также и любой другой компьютер, используемый конкретным человеком в качестве своего личного компьютера. Подавляющее большинство людей используют в качестве ПК настольные и различные переносные компьютеры.
  3. </div>   
<div> Персональный компьютер, ПК (англ. personal computer, PC), ПЭВМ (персональная электронно-вычислительная машина) — компьютер, предназначенный для эксплуатации одним пользователем. К ПК условно можно отнести также и любой другой компьютер, используемый конкретным человеком в качестве своего личного компьютера. Подавляющее большинство людей используют в качестве ПК настольные и различные переносные компьютеры. </div>
Результат:

Персональный компьютер, ПК (англ. personal computer, PC), ПЭВМ (персональная электронно-вычислительная машина) — компьютер, предназначенный для эксплуатации одним пользователем. К ПК условно можно отнести также и любой другой компьютер, используемый конкретным человеком в качестве своего личного компьютера. Подавляющее большинство людей используют в качестве ПК настольные и различные переносные компьютеры.

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

CSS свойства

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

CSS свойство padding-right устанавливает правый внутренний отступ элемента.

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

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

CSS синтаксис:

padding-right:"length | initial | inherit";

JavaScript синтаксис:

object.style.paddingRight = "5px"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
.primer {
width : 33%; /* задаём ширину блока */
padding-top : 15px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 15px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 150px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : orange; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer1 {
width : 33%; /* задаём ширину блока */
padding-top : 25px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 25px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 5px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 25px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : yellow; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width : 33%; /* задаём ширину блока */
padding-top : 5px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 50px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom:25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 75px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : lime; /* задаём цвет заднего фона */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width : 33%; /* задаём ширину блока */
padding-top : 40px; /* устанавливает величину внутреннего отступа от верхнего края элемента. */
padding-right : 75px; /* устанавливает величину внутреннего отступа от правого края элемента. */
padding-bottom : 25px; /* устанавливает величину внутреннего отступа от нижнего края элемента. */
padding-left : 100px; /* устанавливает величину внутреннего отступа от левого края элемента. */
background-color : blue; /* задаём цвет заднего фона */
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 свойства

CSS Padding — Отступы. Уроки для начинающих. W3Schools на русском

CSS3. Уроки для начинающих

Этот элемент имеет отступ 70px.


Попробуйте сами »

CSS Padding — Отступ

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

Из CSS у вас есть полный контроль над отступами. Есть свойства для установки отступов для каждой стороны элемента (сверху, справа, снизу и слева).

Отступ — Отдельные стороны

CSS имеет свойства для указания отступов для каждой стороны элемента:

  • padding-top — отступ сверху
  • padding-right — отступ справа
  • padding-bottom — отступ снизу
  • padding-left — отступ слева

Все padding-свойства могут иметь следующие значения:

  • length (длина) — указывает отступ в px, pt, cm и т.д.
  • % (проценты) — задает отступ в % от ширины содержащего элемента
  • inherit (наследование) — указывает, что отступ должен быть унаследован от родительского элемента

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

Пример

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

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Попробуйте сами »

Padding — Сокращенные свойства

Чтобы сократить код, можно указать все свойства padding в одном свойстве.

Свойство padding является сокращенным свойством для следующих отдельных свойств padding:

  • padding-top — отступ сверху
  • padding-right — отступ справа
  • padding-bottom — отступ снизу
  • padding-left — отступ слева

Таким образом, вот как это работает:

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

  • padding: 25px 50px 75px 100px;
    • отступ сверху 25px
    • отступ справа 50px
    • отступ снизу 75px
    • отступ слева 100px

Пример

Используйте сокращенное свойство padding с четырьмя значениями:

div {
  padding: 25px 50px 75px 100px;
}

Попробуйте сами »

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

  • padding: 25px 50px 75px;
    • отступ сверху 25px
    • отступы справа и слева 50px
    • отступ снизу 75px

Пример

Используйте сокращенное свойство padding с тремя значениями:

div {
  padding: 25px 50px 75px;
}

Попробуйте сами »

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

  • padding: 25px 50px;
    • отступы сверху и снизу 25px
    • отступы справа и слева 50px

Пример

Используйте сокращенное свойство padding с двумя значениями:

div {
  padding: 25px 50px;
}

Попробуйте сами »

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

  • padding: 25px;
    • все четыре отступа 25px

Пример

Используйте сокращенное свойство padding с одним значением: 

div {
  padding: 25px;
}

Попробуйте сами »

Padding и элемент Width (ширина)

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

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

Пример

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

div {
  width: 300px;
  padding: 25px;
}

Попробуйте сами »

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

Пример

Используйте свойство box-sizing, чтобы ширина составляла 300 пикселей независимо от размера отступа:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Попробуйте сами »

Больше примеров

Установите левый отступ
Этот пример демонстрирует, как установить левый отступ элемента <p>.

Установите правый отступ
Этот пример демонстрирует, как установить правый отступ элемента <p>.

Установите верхний отступ
Этот пример демонстрирует, как установить верхний отступ элемента <p>.

Установите нижний отступ
Этот пример демонстрирует, как установить нижний отступ элемента <p>.

Проверьте себя с помощью упражнений!

Все свойства CSS Padding

Свойство Описание
padding Сокращенное свойство для установки всех свойств psdding в одном объявлении
padding-bottom Устанавливает нижний отступ элемента
padding-left Устанавливает левый отступ элемента
padding-right Устанавливает правый отступ элемента
padding-top Устанавливает верхний отступ элемента

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.

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

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