Вторник, 12 Июня 2012 14:33

Свойство padding. Определение и примеры.

Written by 
Оцени эту запись
(4 Голоса)

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

 

Основными свойствами блочной модели являются размеры элемента(width, height), внутренний отступ(padding), граница элемента (border) и внешний отступ (margin). Это основные CSS свойства, используемые при построении макета страницы. Ведь вся HTML страница, по сути, представляется из себя набор блоков(в случае блочной верстки), которые имеют определенные размеры и определенным образом расположены относительно друг друга. Основные блоки, создающие разметку страницы, содержат внутренние элементу. Порой внутренних элементов достаточно много. Одним из основных свойств, влияющих на расположение дочерних блоков в родительском, является padding.

 

Свойство padding определяет пространство между границей элемента и его внутренним контентом(содержимым). Padding очищает пространство вокруг контента элемента с внутренней части его  границ. Внешний вид отступа, заданного padding'ом зависит от фона элемента - фонового цвета или картинки. 

 

Значением свойства padding может быть фиксированная величина, заданная в пикселях px, точках pt или относительных величинах em, а также padding можно задать в процентах % относительно размера элемента.

 

 

 

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

 

padding: 10px;

 

Если у padding'а задано только одно значение, то оно устанавливает отступ со всех сторон элемента - сверху, справа, снизу и слева.

 

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

 

padding: 20px 0 0 5px;

 

Если у свойства padding стоит два значения, то они отвечают за вертикальные и горизонтальные отступы:

 

padding: 20px 5px;

 

 

В таком случае первое значение отвечает за отступ сверху и снизу (вертикальный отступ), а второе - за отступы слева и справа (горизонтальные отступы). То есть, в данном примере, сверху и снизу будет отступ 20px, а слева и справа - 5px.

 

Если у свойства заданы три значения, то они отвечают за отступы сверху, горизонтальные отступы и снизу:

 

padding: 20px 0 5px;

 

В данном случае у элемента внутренний отступ сверху будет равен 20px, слева и справа отступ будет 0px, а нижний внутренний отступ составит 5px.

 

Или же задать отдельно отступ только сверху:

 

padding-top: 20px;

 

Таким образом можно задавать разные отступы от краев:

 

padding-top: 20px; 

padding-left: 5px;

 

 

Все варианты задания свойства padding:

 

  • padding -- задает внутренний отступ со всех сторон, в зависимости ль количества значений
  • padding-top -- задает внутренний отступ сверху
  • padding-right -- задает отступ справа
  • padding-bottom -- задает внутренний отступ снизу
  • padding-left -- задается внутренний отступ слева

 

 

Значение свойства padding по умолчанию равно 0.

 

Свойство padding применимо ко всем элементам, кроме table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column.

 

Данное свойство не наследуется, то есть, если у элемента задано свойство padding со значением 10px, то оно не будет передаваться его потомкам.

 

 

Примеры:

 

 

<div style="background: red; float:left; margin-right: 20px; padding: 10px;"><div style="width: 100px; height: 100px; background: green;">padding: 10px</div></div>
 
<div style="background: red; float:left; margin-right: 20px; padding-top: 20px;"><div style="width: 100px; height: 100px; background: green;">padding-top: 20px</div></div>
 
<div style="background: red; float:left; margin-right: 20px; padding-top: 20px; padding-left: 5px;"><div style="width: 100px; height: 100px; background: green;">padding-top: 20px<br />padding-left: 5px</div></div>
 
<div style="background: red; float:left; margin-right: 20px; padding: 20px 0 0 5px;"><div style="width: 100px; height: 100px; background: green;">padding: 20px 0 0 5px</div></div>
 
<div style="background: red; float:left; margin-right: 20px; padding: 20px 0 10px;"><div style="width: 100px; height: 100px; background: green; color: white;">padding: 20px 0 10px</div></div>
 
<div style="background: red; float:left; margin-right: 20px; padding: 20px 10px 5px 15px;"><div style="width: 100px; height: 100px; background: green; color: white;">padding: 20px 10px 5px 5px</div></div>

 

 

 

padding: 10px
padding-top: 20px
padding-top: 20px
padding-left: 5px
padding: 20px 0 0 5px
padding: 20px 0 10px
padding: 20px 10px 5px 15px
 

 

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

 

div {

width: 150px;

padding-left: 50px; /*прибавит к фактической ширине блока 50px*/ 

 

Причем при задании и левого, и правого внутреннего отступа элементу к ширине прибавится сумма значений отступов:

 

 

div {

width: 150px;

padding: 0 50px; /*прибавит к фактической ширине блока 100px = 50px + 50px*/ 

 

Для примера сделаем два блока с шириной 100px и одному из них зададим левый отступ 50px. Тогда вы наглядно увидите разницу их фактических размеров.

 

Пример:

 

 

width: 150px;
width: 150px;
padding-left: 50px;

 

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

 

 

Расположение контента в блоке с внутренними отступами padding.

 

Когда в одном блоке расположен другой блок и у них отличается цвет фона, то четко видно границу блока и пространство меджу ними. Совсем иначе смотрится текст в блоке с padding'ом. Но могу сказать с уверенностью, что внутренний отступ нужен каждому блоку с текстом, иначе текст будет будет плохо читаться. Для иллюстрации приведу пример блока с достаточно большим количеством текста:

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

 

Теперь четко видно, что в блоке с отступами padding текст смотрится более аккуратно и читабельно. Но блок с padding'ом больше. Его ширина равна  340px = 300px width + 20px padding-left + 20px padding-right. Потому, если вам нужен блок именно шириной 300px, то ему нужно задать width: 260px, тогда его фактическая ширина будет 300px = 260px width + 20px padding-left + 20px padding-right.

 

В случае задания padding'а строчным элементам разница не большая. Padding также увеличивает фактический размер элемента, но, поскольку строчным элементам нельзя задать ширину и высоту, по факту будет происходить аналогичный эффект при размере блока меньше размера родителя или будет уменьшаться размер внутреннего контента.

 

 

 

<p><span style="background: blue; color: white; padding: 0 50px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></p>
<p><span style="background: blue; color: white; padding: 0 50px;">Lorem Ipsum</span></p>

 

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

 

Lorem Ipsum

 

 

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

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов