Источник: 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

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

До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (), текстом () и рассмотрели модель

Да, еще мы и принципы использования успели рассмотреть во всех подробностях (растянувшихся на несколько статей). Теперь пора переходить к правилам, которые составляют основу построения документов (вебстраниц), и начнем мы именно с блочной модели (взаимоотношения Html элементов).

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

Блочная модель в CSS — padding, margin и border

В-третьих, могут использоваться проценты. От чего же они считаются? Оказывается, что от ширины контейнера (то есть от области контента родительского элемента). Причем, это относится не только к margin-right и left, что было бы логично, но и для margin-top и bottom проценты будут рассчитываться именно от ширины (а не высоты) контейнера.

Надо отметить, говоря про задание размерных значений, что Margin может быть еще и отрицательным . Т.е. при задании положительного значения для внешнего отступа мы отодвигаем соседний элемент на указанное расстояние, а в случае указания отрицательного — соседний блок просто-напросто заедет на тот, для которого мы этот отрицательный отступ задали. И это очень часто используется в CSS.

Ну и само собой разумеется, что существует сборное CSS правило Margin, которое во многих случаях позволяет сократить размер кода используемого для задания требуемых внешних отступов. Порядок следования значений в нем строго регламентируется (они прописываются через пробельный символ) и должно соответствовать образцу:

Т.е. перечисление начинается с верхнего (top) и продолжается по часовой стрелке вплоть до завершения круга правым отступом (right). Выглядеть это может примерно так:

Margin:20px 10px 40px 30px;

И это будет означать, что браузер сверху от нашего блока должен сделать отступ в 20 пикселей, справа — в 10, снизу — в 40, а слева — в 30. Т.е. эта запись будет эквивалентна такой:

Сокращение CSS кода видно невооруженным глазом. Но и это еще не предел. Вполне допустимо использовать в сборном правиле не только четыре, но и три, два и даже всего одно значение. Что еще больше поможет уменьшить размер кода. Однако, уменьшать количество значений можно будет только в определенных случаях:

1. Если величины внешних отступов слева и справа будет одинаковыми, например, так: margin:20px 30px 40px 30px;

   То последнее можно будет опустить:

   Margin:20px 30px 40px;

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

   В случае равенства отступов сверху и снизу такой фокус уже не пройдет, ибо по логике можно уменьшать структуру записи сборного правила, лишь отсекая дублирующее значения с ее конца (а значение нижнего отступа будет стоять предпоследним).

2. Если кроме равенства внешних отступов слева и справа имеет место быть равенство их величин сверху и снизу: margin:20px 30px 20px 30px;

   или, что то же самое (в силу пункта 1):

   Margin:20px 30px 20px;

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

   Margin:20px 30px; В этом случае первая величина описывает внешние отступы по вертикали, а вторая — по горизонтали.

3. Ну и, наконец, если все значения в сборном правиле будут одинаковыми: margin:20px 20px 20px 20px;

   или, что то же самое (в силу пункта 2):

   Margin:20px 20px;

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

   Margin:20px; Что будет означать одинаковый внешний отступ со всех сторон от нашего Html элемента.

Говоря про внешние отступы, стоит упомянуть про такую схему как «Margin-colloapse» или, по другому, «схлопывание марджинов». В двух словах суть этого явления заключается в следующем.

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

Например, если для верхнего блока задано следующее:

Margin:20px 20px 200px 20px;

А для нижнего:

Margin:100px 20px 20px 20px;

То нижний марджин верхнего блока (200px) поглотит в себе верхний марджин нижнего (100px, да и даже если он станет равен 199px ничего не изменится) и результирующий внешний отступ между этими двумя блоками все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю Margin, и он никак не складывается со встречным значением соседнего по вертикали элемента.

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

Например, в этом случае:

Верхний margin:20px 20px -20px 20px; Нижний margin:10px 20px 20px 20px;

Результирующий отступ между блоками будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.

Еще одной особенностью использования правила Margin в CSS является то, что прописанное значение по вертикали для строчных элементов игнорируется . Задав:

Margin:20px;

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

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

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

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

Padding и border — внутренние отступы и рамки

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

Как вы можете видеть, тут нет упоминания Auto, а также это CSS правило не допускает использование отрицательных значений (они могут быть только положительными — от нуля и выше). Т.е. с помощью Padding контент за пределы рамки выдвинуть никак не получится. Максимум что можно сделать, это контент вплотную приблизить к рамке.

Проценты в нем считаются точно так же, как в Margin — относительно ширины контейнера (области контента родительского элемента), в котором заключен наш элемент. Сборное правило Padding в Css формируется и подчиняется тем же законам, что и рассмотренное чуть выше:

Padding:20px 10px 40px 30px;

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

И последнее, что сегодня я хотел бы рассмотреть — это рамки, которые задаются с помощью Border . У них есть три типа параметров:

1. Border-width — задает толщину рамки
2. Border-color — задает ее цвет
3. Border-style — тип рамки или же тип линии, которой она будет отрисована

У всех этих трех CSS правил имеется допустимый набор значений:

Ширина линии для рамки (Border-width ) может задаваться как с помощью цифр в Em, Ex или Px, так и словами:

1. Thin — тонкая линия;
2. Medium — средняя (данное значение используется по умолчанию);
3. Thick — толстая.

border-width:2px;

В качестве значения для цвета рамки (Border-color ) можно использовать принятые для способы их задания (шестнадцатеричный код, слова и т.д.):

Border-color:red;

По умолчанию, если цвет для рамки явно не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
CSS свойство Border-style позволяет задать словами тип рамки:

1. None — без рамки (используется по умолчанию)
2. Dotted — линия отрисовывается точками
3. Dashed — пунктиром
4. Solid — сплошной линией
5. Double — двойной линией
6. Groove — вдавленная рамка
7. Ridge — выпирающая
8. Inset и outset — игры с тенью

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

Тоже самое будет касаться и сборного правила Border — оно может быть прописано как для всех сторон одновременно (Border), так и для каждой из сторон в отдельности (Border-top, left, bottom и right). Порядок следования значений не важен:

Border:1px solid red;

Если что-то пропустить, то вместо него будет использоваться значение по умолчанию.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Height, width и overflow - CSS правила для описания области контента при блочной верстке
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom) Разное оформление для внутренних и внешних ссылок через CSS
Float и clear в CSS - инструменты блочной верстки
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS

Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает 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 :

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 .

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

Свойство			Opera		IExplorer	Edge
padding	1.0	1.0	3.5	1.0	4.0	12.0

CSS синтаксис:

padding: "length | initial | inherit" ;

JavaScript синтаксис:

Object.style.padding = "5px"

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

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

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 */
}

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