Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right). Css padding margin отличие. Margin или padding? Размышления о том, что и где использовать. Что нужно помнить Что такое padding в

Источник: Margin or padding?
Philipp Sporrer.
Перевод: vl49.

Когда с целью форматирования лучше использовать поля, а когда внутренние отступы, и имеет ли это какое-то значение?

Я очень долго мучился в поисках подходящих ответов. И лишь после написания массы ужасного, неразборчивого CSS кода, сопровождаемого различными побочными эффектами, я с уверенностью смог сказать, что мной найдены основополагающие железные правила, касательно перечисленных выше вопросов.

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

В данном примере можно выделить два типа интервалов:

Здесь очень важно понимать, что мы имеем дело с двумя разными понятиями, которые при компоновке не должны быть взаимосвязаны. То есть если мне понадобиться изменить расстояние между карточками и их контейнером, к примеру, до 24 пикселей, то это не должно каким-либо образом влиять на интервал между самими карточками.

Реализация примера с помощью CSS?

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

Container {
padding: 16px;
}
.card +.card {
margin: 0 0 0 8px;
}

Всего-навсего 2 селектора и 2 правила.

Какую же функцию выполняет знак плюса?

Символ + представляет собой смежный селектор . Он указывает только на тот элемент, который следует непосредственно за элементом, указанным перед этим селектором.

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

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

Все работает прекрасно до тех пор, пока нам не понадобиться разместить рядом с карточками что-нибудь другое, отличное от карточки. Ну, скажем, кнопку «Добавить карточку» ("Add card" ):

Судя по уже имеющемуся фрагменту CSS кода мы, скорее всего, не стали бы присваивать новому представляющему кнопку элементу класс .card , поскольку он карточкой не является. Как же быть? Стоит ли ради этого создавать дополнительное имя класса .add-card , которое содержит тоже правило со свойством margin , что и класс .card ? Нет, есть более подходящее решение.

Лоботомированная сова *+* .

А что, похоже. Несмотря на забавную ассоциацию, этот метод прекрасно работает, и я его постоянно использую с тех пор как узнал о его существовании. Итак, к чему это все? Вот взгляните на соответствующий CSS код:

Container {
padding: 16px;
}
/* ну что, узнали совушку лоботомизированную? 😜 */
.container > * + * {
margin: 0 0 0 8px;
}

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

В итоге.

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

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

padding — для промежутков между контейнером и его контентом.

margin — для промежутков между находящимися внутри контейнера элементами.

Post Views: 427

Описание

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

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

Синтаксис

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

Значения

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

document.getElementById("elementID ").style.padding

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.

Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.

Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).

Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.

В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.

Особенности margin и padding

При использовании padding, размеры padding"а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding"а.

Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).

Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.

И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.

Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!

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

padding

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

Единицами измерения могут быть пиксели (px) или процентное соотношение (%).

#block {
padding: 12px; /* отступ от границ блока до содержания - со всех сторон будет 12 пикселей */
}

Есть возможность указать поле только с одной определённой стороны:

padding-top - свойство, создающие поля сверху.
padding-right - свойство, создающие поля справа.
padding-bottom - свойство, создающие поля снизу.
padding-left - свойство, создающие поля слева.

#block {
padding-bottom: 25px; /* снизу поле 25 пикселей */
padding-left: 15px; /* слева поле 15 пикселей */
}

Как Вы заметили, если указывать таким образом поля с 2-х или 3-х сторон, то получится длинный код. Для этого существует сокращённая запись свойства padding. В ней поочерёдно указывается все 4 значения - от каждого края в одну строчку, движение идет по часовой строке, начиная с верхнего:

Padding: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;

#block {
padding: 25px 10px 15px 6px; /* сверху 25px, справа 10px, снизу 15px, слева 6px */
}

margin

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

#block {
margin: 4px;
}

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

margin-top - свойство, создающие отступы сверху.
margin-right - свойство, создающие отступы справа.
margin-bottom - свойство, создающие отступы снизу.
margin-left - свойство, создающие отступы слева.

Как и у свойства padding, у margin тоже имеется возможность сокращенной записи значений для разных сторон. Движение идет по часовой стрелке, с верхнего поля:

Margin: ВерхнийОтступ ПравыйОтступ ОтступСнизу ОтступСлева;

#block {
margin: 15px 10px 5px 25px; /* сверху 15px, справа 10px, снизу 5px, слева 25px */
}

Спасибо за внимание!

Это свойство может иметь от одного до четырех значений.

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

1. При указании четырёх значений (5px 10px 15px 20px ) - порядок расстановки внутренних отступов будет следующий: Top (5px ) - Right (10px ) - Bottom (15px ) - Left (20px ). Для запоминания порядка расстановки внутренних отступов в одном объявлении можно использовать английское слово TR ouBL e(где T - top, R - right, B - bottom, L - left).


2. При указании трёх значений (5px 10px 15px ) - порядок расстановки внутренних отступов будет следующий: Top (5px ) - Right & Left (10px ) - Bottom (15px ).


3. При указании двух значений (5px 10px ) - первое значение(5px ) будет задавать размер внутреннего отступа от верха и от низа содержимого элемента, второе (10px ) значение - внутренние отступы слева и справа содержимого элемента.


4. При указании одного значения (5px ) - внутренний отступ со всех сторон будет одного размера - 5px .

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

CSS синтаксис:

JavaScript синтаксис:

Object.style.padding = "5px"

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

Версия CSS

Наследуется

Анимируемое

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