что делает padding в css

padding

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

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

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-padding

Версии CSS

Описание

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

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

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

Синтаксис

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

Значения

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

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

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

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

Браузеры

Источник

padding

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

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

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

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

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

Синтаксис

Обозначения

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

Значения

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

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

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

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

Источник

Организация отступов в верстке (margin/padding)

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.

Основные принципы:

Отступы идут от предыдущего элемента к следующему.

margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

Отступы идут в направлении потока дом дерева, блок сам себя не толкает.
Изначально он находится в статическом положении, и получает какое-то воздействие, за счет других.

Отступ задается последнему возможному элементу в доме

margin(ы) задаюся только между соседними элементами дом дерева.

В примере 3 списка, в следующей структуре:

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

Не за счет дочерних элементов, а за счет соседних делается отступ.

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

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

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

Никогда не делайте отступы элементам, которые могут использоваться больше чем один раз. Даже если вы не придерживаетесь методологий, учитывайте перспективу. Для этого есть обертки. Обертки это хорошо. Либо дополнительные классы.

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

У последнего элемента группы, отступ обнуляется (всегда)

Возьмем для примера список и изображение.

Это горизонтальное меню и логотип (который почему-то справа).

Между ссылками и логотипом одинаковое расстояние. Но если есть расстояние между последней лишкой и новым блоком, то этот отступ делается не за счет лишки. А список отступает.

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

Возьмем другой пример:

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

Чаще чем другие псевдоклассы, надо использовать :last-child.

Исключения

Источник

padding

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

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

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-padding

Версии CSS

Описание

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

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

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

Синтаксис

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

Значения

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

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

что делает padding в css. Смотреть фото что делает padding в css. Смотреть картинку что делает padding в css. Картинка про что делает padding в css. Фото что делает padding в css

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

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

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

Браузеры

Источник

Свойство padding в CSS

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

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

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

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

По умолчанию пространство между границей и содержимым элемента отсутствует, то есть padding =0. При этом значение auto для этого свойство является некорректным.

Значение padding в CSS может записываться с помощью нескольких чисел – от 1 до 4.

Количество значенийРезультат
1Все отступы одинаковы и равны указанному числу
2Первое число определяет вертикальные отступы (сверху и снизу), второе – горизонтальные.
3Первое – верхний отступ, второе – правый и левый, третье – нижний.
4Все отступы различные

Таким образом получается, что следующие три записи приведут к одному и тому же результату:

НА ЗАМЕТКУ. Для запоминания очередности присвоения надо представить часовую стрелку. Задание значений полям начинается с 12 часов и проходит круг по направлению ее движения, то есть первое значение устанавливается для верхнего поля, второе – справа и т.д.

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

Padding и блочная модель

Источник

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

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