Padding — внутренние поля элемента

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

Поле слева от текста

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

ВАЖНО!

У строчных элементов это свойство применяется только с боков (с лева и с права), на верх или низ свойство никак не влияет

CSS box - sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока.

Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Значения:

Content-box

Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

Border-box

Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.

Padding-box

Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

Inherit

Наследует значение родителя.

CSS свойства

Название Описание box-sizing: Применяется для изменения алгоритма расчёта ширины и высоты элемента. По общему правилу CSS, общая ширина складывается из ширины содержимого, значений margin, padding и border. Аналогично обстоит и с общей высотой блока. Свойство box-sizing позволяет изменить алгоритм, чтобы свойства width и height задавали размеры самого блока. Значения: · content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border. · border-box Свойства width и height включают в себя значения padding и border, но не margin. border-width: Значение border-width определяет толщину рамки. border-style: Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента. Значения: border-color: Устанавливает цвет рамки элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных. border Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы (рамки) вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right. width Устанавливает ширину блочных элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей. В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), проценты (%) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно неуказан, то в его качестве выступает окно браузера. height Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. margin Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера. Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон. Величину отступов можно указывать в пикселах (px) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Значение auto указывает, что размер отступов будет автоматически рассчитан браузером. margin-top Устанавливает величину отступа от верхнего края элемента. margin-bottom Устанавливает величину отступа от нижнего края элемента. margin-left Устанавливает величину отступа от левого края элемента. margin-right Устанавливает величину отступа от правого края элемента. padding Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон. Величину полей можно указывать в пикселах (px) или других допустимых для CSS единицах. padding-top Устанавливает значение поля от верхнего края элемента. padding-bottom Устанавливает значение поля от нижнего края элемента. padding-left Устанавливает значение поля от левого края элемента. padding-right Устанавливает значение поля от правого края элемента.