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

Свойство padding в CSS

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

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

На примере ниже сделано следующее: есть блок div с желтым фоном и в нем содержимое в виде текста на зеленом фоне. К блоку применены отступы по всем сторонам padding: 20px 30px .

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

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

  • padding-right – устанавливает отступ от правой границы блока;
  • padding-left – слева;
  • padding-top – сверху;
  • padding-bottom – снизу.

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

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

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

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

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

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

  • единицами, используемыми в CSS – px, em и т.п.;
  • % – процентами от ширины элемента;
  • inherit – наследования значений родительского элемента.

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

Использование этого свойства может привести к неожиданным результатам. Если вы создали элемент и указали у него ширину 200px и кроме того указали padding: 20px, то размер этого элемента неожиданно окажется 240px, то есть к установленной ширине добавятся размеры отступов. Чтобы сохранить первоначальный размер блока необходимо применить к нему свойство box-sizing: border-box .

На примере демонстрируется два элемента с установленной одинаковой шириной и отступами, но ко второму применено border-box , и его размеры не увеличиваются в зависимости от отступов.

CSS Padding — Внутренний отступ

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

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

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

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

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

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

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

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

Пример

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

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

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

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

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

Т.о., вот как это работает:

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

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

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

Пример

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

Padding и Width

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

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

Пример

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

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

Пример

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

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

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

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

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

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

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

Все CSS свойства отступа

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

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

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

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

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

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

  1. Отступы идут от предыдущего элемента к следующему.
  2. Отступ задается последнему возможному элементу в доме.
  3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
  4. У последнего элемента группы, отступ обнуляется (всегда).

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

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

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

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

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

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

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

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

В этой ситуации .main-section__item и является последним возможным, кому можно задать отступ, чтоб разделить списки. Такого же эффекта можно добиться, если задать отступ диву, списку, лишке, ссылке, но это будет не правильно.

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

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

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

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

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

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

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

  • Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
  • Добавление класса (можно сделать блок элементом).
  • Обертка (как блок, у которого роль, только в позиционировании).

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

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

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

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

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img . О чем говорилось во втором принципе.

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

Интересует нас отступ между новостями, которые задается .blog-preview__item < margin-bottom: 20px; >. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview . О чем говорилось во втором принципе.

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

Исключения

  • В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько <br> в коде подряд.
    />
  • «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
  • Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
  • Отрицательные маргины, auto, padding для контейнера.

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

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