Свойства PADDING и MARGIN и как их использовать


Оглавление (нажмите, чтобы открыть):

Свойства PADDING и MARGIN и как их использовать. Margin или padding? Размышления о том, что и где использовать

Описание

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

Рис. 1. Отступ от левого края элемента

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

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

Синтаксис

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

Значения

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

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

Auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

Когда использовать margin vs padding в CSS. Свойства PADDING и MARGIN и как их использовать

Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу продолжить тему изучения и рассмотреть те стилевые правила, которые позволяют задать отступы и границы для 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 кода видно невооруженным глазом. Но и это еще не предел. Вполне допустимо использовать в сборном правиле не только четыре, но и три, два и даже всего одно значение. Что еще больше поможет уменьшить размер кода. Однако, уменьшать количество значений можно будет только в определенных случаях:

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

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

Margin:20px 30px 40px;

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

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

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

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

Margin:20px 30px 20px;

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

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

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

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

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

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

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

Забегая чуть вперед скажу, что 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 ) можно использовать принятые для способы их задания (шестнадцатеричный код, слова и т.д.):

По умолчанию, если цвет для рамки явно не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
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 элементов на вебстранице

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

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

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

  • padding-top: значение;
  • padding-right: значение;
  • padding-bottom: значение;
  • padding-left: значение;
  • margin-top: значение;
  • margin-right: значение;
  • margin-bottom: значение;
  • margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

  • 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
  • 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
  • 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
  • 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.

Расстояние между блоками равно большему из значений

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

  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
    20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает 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;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто — для блока отступы идут по часовой стрелке: первое число — сверху, второе — справа, третье — снизу, четвёртое — слева.

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

Описание

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

Рис. 1. Отступ от левого края элемента

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

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

Синтаксис

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

Значения

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

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

Auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

Когда использовать margin vs padding в CSS

При написании CSS существует конкретное правило или руководство, которое должно использоваться при принятии решения о том, когда использовать margin и когда использовать padding ?

TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.

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

Рассмотрим два элемента, один над другим, каждый с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.

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

Таким образом, содержимое этих двух элементов в конечном итоге будет 2em на 2 элемента.

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

Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, а затем содержимое второго элемента. Таким образом, содержание этих двух элементов находится на расстоянии 1 1em .

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

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

Маржа находится снаружи элементов блока, а внутренняя часть — внутри.

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

Лучшее, что я видел, объясняя это примерами, диаграммами и даже «попробовать сами», — это здесь.

Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.

Одна вещь, о которой следует иметь в виду, — это браузеры, совместимые со стандартами (IE quirks — это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3.

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

Сравните элементы блока с картинками, висящими на стене:

  • Окно браузера похоже на стену.
  • контент похож на фотографию.
  • margin похож на пространство между изображениями в рамке.
  • дополнение похоже на матирование вокруг фотографии.
  • Граница аналогична границе кадра.

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

1 Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing .

MARGIN vs PADDING:

Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.


Маржа не является частью элемента, где дополнение является частью элемента.

Пожалуйста, смотрите ниже изображение, извлеченное из Margin Vs Padding — Свойства CSS

Содержимое — содержимое поля, в котором отображается текст и изображения

Обивка — очищает область вокруг содержимого. Прокладка прозрачная

Граница — граница вокруг отступов и содержимого

Маржа — очищает область за пределами границы. Поля прозрачные

Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin’d объектов, чтобы перейти к ее родительскому объекту.

Что касается полей, то вам не нужно беспокоиться об ширине элемента.

Как и когда вы даете что-то , вам нужно уменьшить ширину элемента 20px, чтобы сохранить » fit» и не нарушать другие элементы вокруг него.

Поэтому я обычно начинаю с использования paddings, чтобы получить все » packed «, а затем использовать поля для небольших настроек.

Еще одна вещь, о которой нужно знать, — это то, что paddings более совместимы в разных браузерах, и IE не очень хорошо относится к отрицательным полям.

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

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

обратите внимание, что несколько раз вам нужно использовать margin.

Одна вещь, которую следует отметить, — это то, что автокаталитические поля вас раздражают (и вы не используете цвета фона на своих элементах), что просто упрощает использование прокладок.

Когда использовать поля и прокладки

В CSS есть два способа создать пространство вокруг ваших элементов: поля и padding. В большинстве сценариев использования они функционально идентичны, но, по правде говоря, они ведут себя несколько иначе. Существуют важные различия между полями и отступом, которые вы должны учитывать при выборе того, что нужно использовать для перемещения элементов вокруг страницы. Тем не менее, в тех случаях, когда любые поля или отступы могут использоваться для одного и того же эффекта, многие решения сводятся к личным предпочтениям.

Когда использовать поля

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

Мастер Йода рекомендует:  Стиль против дизайна

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

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

Когда использовать прокладку

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

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

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

Свойства PADDING и MARGIN и как их использовать. Запомним навсегда: чем отличаются margin и padding

Оставьте комментарий 6,950

Описание

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

Рис. 1. Отступ от левого края элемента

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

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

Синтаксис

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

Значения

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

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

Auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)

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

До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (Font Weight, Family, Size, Style), текстом (text-decoration, vertical-align, text-align) и рассмотрели модель формирования фона в CSS через background.

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

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

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

Для браузера Firefox есть замечательный плагин под названием Фаербаг, о котором я уже довольно давно и подробно писал.

При просмотре информации о любом Html теге веб страницы, этот плагин на вкладке «Макет» позволяет увидеть очень наглядное представление отступов и границ данного элемента относительно родительского и тех тегов (или же содержимого), которые заключены внутри оного (матрешка такая получается):

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

Если начинать рассматривать эту матрешку изнутри, начиная с содержимого, то дальше идет область внутреннего отступа от этого содержимого до рамки этого тега. Размер области задается с помощью CSS правила Padding, а ширину рамки можно задать с помощью Border.

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

Сразу оговорюсь, что вы можете задавать Padding и Margin, а также размеры рамки Border отдельно для каждой из сторон блока (прямоугольной области), которые определяются как:

  1. top (верх) — например, padding-top, margi-top, border-top
  2. bottom (низ)
  3. left (слева)
  4. right (справа)

Ну и для примера посмотрим, что именно будут обозначать border, margin и padding применительно к каким-то конкретным сторонам блочной модели:

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

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

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

Margin (top, bottom, left, right) — внешние отступы в CSS

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

Наш элемент, для которого мы прописывает данное правило, взаимодействует с границами своего контейнера и с границами соседних блоков, которые в коде расположены рядом с ним. Соответственно, существуют четыре CSS правила для каждой из имеющихся границ: margin-top,right, bottom и left. Что можно использовать в качестве значений для них?

Ну, во-первых, это волшебное Auto, которое отдает на откуп браузеру расчет этих самых внешних отступов. Понятно, что браузеры для расчетов используют какие-то значения, и тут все далеко не тривиально. Пока отметим для себя, что margin Auto предполагает самостоятельный расчет этих значений браузером.

Во-вторых, в качестве значений для margin-top, right, bottom и left можно использовать размерные величины Em, Ex или Px.

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

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

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

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

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

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

    Если величины внешних отступов слева и справа будет одинаковыми, например, так:

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

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

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

Если кроме равенства внешних отступов слева и справа имеет место быть равенство их величин сверху и снизу:

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

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

В этом случае первая величина описывает внешние отступы по вертикали, а вторая — по горизонтали.
Ну и, наконец, если все значения в сборном правиле будут одинаковыми:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По умолчанию, если цвет для рамки явно не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.
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). Порядок следования значений не важен:

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

Свойства PADDING и MARGIN и как их использовать. Поля и отступы CSS: отличия свойств margin и padding

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

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

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

  • padding-top: значение;
  • padding-right: значение;
  • padding-bottom: значение;
  • padding-left: значение;
  • margin-top: значение;
  • margin-right: значение;
  • margin-bottom: значение;
  • margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

  • 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
  • 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
  • 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
  • 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.

Расстояние между блоками равно большему из значений

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

  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
    20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.

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

Рассмотрим два элемента, один над другим, каждый с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.

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

Таким образом, содержимое этих двух элементов в конечном итоге будет 2em на 2 элемента.

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

Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, а затем содержимое второго элемента. Таким образом, содержание этих двух элементов находится на расстоянии 1 1em .

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

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

Лучшее, что я видел, объясняя это примерами, диаграммами и даже «попробовать сами», — это .

Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.

Одна вещь, о которой следует иметь в виду, — это браузеры, совместимые со стандартами (IE quirks — это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3 .

Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.


Маржа не является частью элемента, где дополнение является частью элемента.

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

Сравните элементы блока с картинками, висящими на стене:

  • Окно браузера похоже на стену.
  • контент похож на фотографию.
  • margin похож на пространство между изображениями в рамке.
  • дополнение похоже на матирование вокруг фотографии.
  • Граница аналогична границе кадра.

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

1 Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing .

Что касается полей, то вам не нужно беспокоиться об ширине элемента.

Как и когда вы даете что-то , вам нужно уменьшить ширину элемента 20px , чтобы сохранить » fit » и не нарушать другие элементы вокруг него.

Поэтому я обычно начинаю с использования paddings, чтобы получить все » packed «, а затем использовать поля для небольших настроек.

Еще одна вещь, о которой нужно знать, — это то, что paddings более совместимы в разных браузерах, и IE не очень хорошо относится к отрицательным полям.

Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin»d объектов, чтобы перейти к ее родительскому объекту.

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

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

обратите внимание, что несколько раз вам нужно использовать margin.

В CSS есть два способа создать пространство вокруг ваших элементов: поля и padding. В большинстве сценариев использования они функционально идентичны, но, по правде говоря, они ведут себя несколько иначе. Существуют важные различия между полями и отступом, которые вы должны учитывать при выборе того, что нужно использовать для перемещения элементов вокруг страницы. Тем не менее, в тех случаях, когда любые поля или отступы могут использоваться для одного и того же эффекта, многие решения сводятся к личным предпочтениям.

Когда использовать поля

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

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

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

Когда использовать прокладку

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

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

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

Разница расширенного поля и пояснения

Нецелесообразно использовать padding для содержимого пространства в элементе; вы должны использовать margin для дочернего элемента. Старые браузеры, такие как Internet Explorer, неправильно истолковали модель окна, за исключением случаев использования margin , который отлично работает в Internet Explorer 4.

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

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

Вы компенсируете очень разную ошибку браузера, которую продавец * cough * Mozilla * cough * отказывается исправлять и быть уверенным (в той степени, в какой вы регулярно проводите обмен с редакторами W3C и WHATWG), которые вы должны иметь рабочее решение и это решение не будут влиять на стилирование чего-либо другого, кроме ошибки, которую вы компенсируете.

Мастер Йода рекомендует:  Функция «Promoted posts» появилась в мобильных приложениях Facebook

Когда у вас есть элемент 100% ширины с padding: 50px; , вы получите width: calc(100% + 100px); . Поскольку margin не добавляется в width , это не вызовет неожиданных проблем с макетами, если вы используете margin on child elements вместо padding непосредственно в элементе.

Итак, если вы не делаете одну из этих двух вещей, не добавляйте дополнение к элементу, а к нему следует использовать элемент child/children, чтобы обеспечить ожидаемое поведение во всех браузерах.

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

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

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

Так просто Поля — это пространство вокруг элементов, а Прокладка — это пространство вокруг содержимого, которое является частью элемента.

Это изображение из codemancers показывает, как границы и границы становятся доступными, а также то, как границы и контент-ящик делают их разными.

Сегодня мы поработаем над пониманием разницы между HTML padding ( внутренний отступ ) и margin (внешний отступ ) в CSS . Но сначала разберемся с их синтаксисом. Существует несколько способов написания этих свойств: обычный и сокращенный:

Padding и Margin в CSS

Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:

padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;

С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство « padding «.

padding: 10px 20px 40px 10px;

У padding и margin есть четыре значения: верхнее, правое, нижнее и левое. В сокращенной записи, показанной выше, так же задаются четыре значения, отделенных друг от друга пробелом. Первое из четырех значений отступ сверху, затем отступ справа, снизу ( padding bottom HTML ) и слева:

padding: TOP RIGHT BOTTOM LEFT; (padding: сверху справа снизу слева)

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px , левый и правый по 10px , а нижний — 40px , то можно использовать следующую форму записи:

padding: 30px 10px 40px;

Сокращаем до двух значений!

Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px , а левый и правый отступы — по 20px . Наш CSS будет выглядеть следующим образом:

padding: TOP/BOTTOM RIGHT/LEFT; (padding: сверху/снизу справа/слева) padding: 10px 20px;

Только одно значение!

Наша последняя версия сокращенной записи для padding и margin HTML содержит только одно значение. Эту запись можно использовать, когда все отступы ( сверху, снизу, справа и слева ) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px , то CSS выглядел бы следующим образом:

Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px ;

Как работать с PADDING и MARGIN

Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента . Margin используется для задания пространства вокруг внешней границы элементов.

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

Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

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

PADDING и MARGIN на примере сайта

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца (тега

), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome , чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding , который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px , а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin . Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент . Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin .

18 октября 2020 в 15:36

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

  • CSS ,
  • HTML
  • Tutorial

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

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

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

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

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

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

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

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

  • Далеко-далеко, за словесными.

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

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

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

headline in a section of seven words

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

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

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

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

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

.block__item > .block < margin-right: 10px; >.block.block__item < margin-right: 10px; >.block-wrap > .block

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

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

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

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

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

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

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

Исключения

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

P. S. Советую ознакомиться с публикацией

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

MARGIN (Поля) — это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.

PADDING (Отступы) — как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

Пример: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:

Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

В каких случаях лучше пользоваться отступами, а в каких полями?

Несколько принципиальных отличий:

Отступы(padding) распологаются внутри блока, а поля(margin) — за их пределами;

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

14. Высота(height) и ширина(width) блоков

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

Но, с помощью технологии CSS , можно задавать необходимую нам ширину и высоту блоков.

HEIGHT – свойство, устанавливающее высоту блока;

WIDTH – свойство, устанавливающее ширину блока;

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

Создадим 4 класса, и поочередно присвоим их одному и тому же боксу (в данном случае DIV ) с текстом.

Теперь фиксированная высота, а ширина растягивается по содержимому.

Здесь фиксированная как высота, так и ширина.

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

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

CSS. Свойства border, margin и padding

Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.

Давайте создадим div и присвоим ему свойства margin, padding и border.

Свойство Padding

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

  • padding-top: 10px;
  • padding-right: 10px;
  • padding-bottom: 10px;
  • padding-left: 10px;

Эту запись можно сократить:

  • padding:25px 50px 75px 100px;
    • сверху 25px
    • справа 50px
    • снизу 75px
    • слева 100px

  • padding:25px 50px 75px;
    • сверху 25px
    • справа и слева 50px
    • снизу 75px

  • padding:25px 50px;
    • сверху и снизу 25px
    • справа и слева 50px

  • padding:25px;
    • все 25px

Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.

Иначе говоря у нас есть элемент div с классом div-1:

Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.

Свойство Border

CSS свойство border позволяет вам определять стиль и цвет границы элемента.

border-width

Свойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).

border-color


Свойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:

  • название — название цвета, например, «red»
  • RGB — определяет RGB значение, например, «rgb(255,0,0)»
  • Hex — определяет hex значение, например, «#ff0000»

border-style

  • dotted: Определяет точетную границу
  • dashed: Определяет пунктирную границу
  • solid: Определяет толстую границу
  • double: Определяет две границы. Расстояние между ними зависит от значения border-width
  • groove: Определяет объемную вдавленную границу
  • ridge: Определяет объемную выпуклую границу
  • inset: Определяет границу так, что блок качется вдавленным
  • outset: Определяет границу так, что блок качется выпуклым

Вы можете записать свойства границы элемента укороченным образом:

Свойство Margin

CSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.

Вы можете определить значения margin для элемента следующим образом:

  • margin-top:100px;
  • margin-bottom:100px;
  • margin-right:50px;
  • margin-left:50px;

Эту запись можно сократить:

  • margin:25px 50px 75px 100px;
    • сверху margin 25px
    • справа margin 50px
    • снизу margin 75px
    • слева margin 100px

  • margin:25px 50px 75px;
    • сверху margin 25px
    • справа и слева margin 50px
    • снизу margin 75px

  • margin:25px 50px;
    • сверху и снизу margin 25px
    • справа и слева margin 50px

  • margin:25px;
    • все четыре margin 25px

Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.

Когда использовать margin vs padding в CSS. Свойства PADDING и MARGIN и как их использовать

Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.

Давайте создадим div и присвоим ему свойства margin, padding и border.

Свойство Padding

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

  • padding-top: 10px;
  • padding-right: 10px;
  • padding-bottom: 10px;
  • padding-left: 10px;

Эту запись можно сократить:

  • padding:25px 50px 75px 100px;
    • сверху 25px
    • справа 50px
    • снизу 75px
    • слева 100px
  • padding:25px 50px 75px;
    • сверху 25px
    • справа и слева 50px
    • снизу 75px
  • padding:25px 50px;
    • сверху и снизу 25px
    • справа и слева 50px
  • padding:25px;
    • все 25px

Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.

Иначе говоря у нас есть элемент div с классом div-1:

Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.

Свойство Border

CSS свойство border позволяет вам определять стиль и цвет границы элемента.

border-width

Свойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).

border-color

Свойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:

  • название — название цвета, например, «red»
  • RGB — определяет RGB значение, например, «rgb(255,0,0)»
  • Hex — определяет hex значение, например, «#ff0000»

border-style

  • dotted : Определяет точетную границу
  • dashed : Определяет пунктирную границу
  • solid : Определяет толстую границу
  • double : Определяет две границы. Расстояние между ними зависит от значения border-width
  • groove : Определяет объемную вдавленную границу
  • ridge : Определяет объемную выпуклую границу
  • inset : Определяет границу так, что блок качется вдавленным
  • outset : Определяет границу так, что блок качется выпуклым

Вы можете записать свойства границы элемента укороченным образом:

Свойство Margin

CSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.

Вы можете определить значения margin для элемента следующим образом:

  • margin-top:100px;
  • margin-bottom:100px;
  • margin-right:50px;
  • margin-left:50px;

Эту запись можно сократить:

  • margin:25px 50px 75px 100px;
    • сверху margin 25px
    • справа margin 50px
    • снизу margin 75px
    • слева margin 100px
  • margin:25px 50px 75px;
    • сверху margin 25px
    • справа и слева margin 50px
    • снизу margin 75px
  • margin:25px 50px;
    • сверху и снизу margin 25px
    • справа и слева margin 50px
  • margin:25px;
    • все четыре margin 25px

Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.

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

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

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

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

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

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

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

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

  • Далеко-далеко, за словесными.

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

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

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

headline in a section of seven words

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

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

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

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

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

.block__item > .block < margin-right: 10px; >.block.block__item < margin-right: 10px; >.block-wrap > .block

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

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

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

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

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

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

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

Исключения

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

P. S. Советую ознакомиться с публикацией

TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.

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

Рассмотрим два элемента, один над другим, каждый с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.

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

Таким образом, содержимое этих двух элементов в конечном итоге будет 2em на 2 элемента.

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

Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, а затем содержимое второго элемента. Таким образом, содержание этих двух элементов находится на расстоянии 1 1em .

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

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

Лучшее, что я видел, объясняя это примерами, диаграммами и даже «попробовать сами», — это .

Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.

Одна вещь, о которой следует иметь в виду, — это браузеры, совместимые со стандартами (IE quirks — это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3 .

Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.

Маржа не является частью элемента, где дополнение является частью элемента.

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

Сравните элементы блока с картинками, висящими на стене:

  • Окно браузера похоже на стену.
  • контент похож на фотографию.
  • margin похож на пространство между изображениями в рамке.
  • дополнение похоже на матирование вокруг фотографии.
  • Граница аналогична границе кадра.

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

1 Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing .

Что касается полей, то вам не нужно беспокоиться об ширине элемента.

Как и когда вы даете что-то , вам нужно уменьшить ширину элемента 20px , чтобы сохранить » fit » и не нарушать другие элементы вокруг него.

Поэтому я обычно начинаю с использования paddings, чтобы получить все » packed «, а затем использовать поля для небольших настроек.

Еще одна вещь, о которой нужно знать, — это то, что paddings более совместимы в разных браузерах, и IE не очень хорошо относится к отрицательным полям.

Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin»d объектов, чтобы перейти к ее родительскому объекту.

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


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

обратите внимание, что несколько раз вам нужно использовать margin.

В CSS есть два способа создать пространство вокруг ваших элементов: поля и padding. В большинстве сценариев использования они функционально идентичны, но, по правде говоря, они ведут себя несколько иначе. Существуют важные различия между полями и отступом, которые вы должны учитывать при выборе того, что нужно использовать для перемещения элементов вокруг страницы. Тем не менее, в тех случаях, когда любые поля или отступы могут использоваться для одного и того же эффекта, многие решения сводятся к личным предпочтениям.

Когда использовать поля

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

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

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

Когда использовать прокладку

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

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

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

Разница расширенного поля и пояснения

Нецелесообразно использовать padding для содержимого пространства в элементе; вы должны использовать margin для дочернего элемента. Старые браузеры, такие как Internet Explorer, неправильно истолковали модель окна, за исключением случаев использования margin , который отлично работает в Internet Explorer 4.

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

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

Вы компенсируете очень разную ошибку браузера, которую продавец * cough * Mozilla * cough * отказывается исправлять и быть уверенным (в той степени, в какой вы регулярно проводите обмен с редакторами W3C и WHATWG), которые вы должны иметь рабочее решение и это решение не будут влиять на стилирование чего-либо другого, кроме ошибки, которую вы компенсируете.

Когда у вас есть элемент 100% ширины с padding: 50px; , вы получите width: calc(100% + 100px); . Поскольку margin не добавляется в width , это не вызовет неожиданных проблем с макетами, если вы используете margin on child elements вместо padding непосредственно в элементе.

Итак, если вы не делаете одну из этих двух вещей, не добавляйте дополнение к элементу, а к нему следует использовать элемент child/children, чтобы обеспечить ожидаемое поведение во всех браузерах.

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

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

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

Так просто Поля — это пространство вокруг элементов, а Прокладка — это пространство вокруг содержимого, которое является частью элемента.

Это изображение из codemancers показывает, как границы и границы становятся доступными, а также то, как границы и контент-ящик делают их разными.

От автора: когда я только начал изучать CSS, я все время путался в margin и padding. Они казались очень похожими, а в некоторых случаях давали одинаковый результат. В этом уроке вы увидите разницу между CSS margin и padding, а также узнаете, как эти свойства влияют на пространство между элементами на странице. Также мы обсудим схлопывание margin’ов, использование разных единиц измерения при создании адаптивных сайтов. Завершим статью мы парочкой советов по раскладке с использованием margin и padding.

Блочная модель

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

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

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

Если нужно увеличить или уменьшить расстояние между элементами, используйте margin. Свойство margin никак не влияет на размеры элемента.

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

По блоковой модели W3C ширина элемента вычисляется из контента блока без учета padding и margin. Padding и рамка добавляются поверх заданных размеров, что может привести к непредсказуемым последствиям для макета страницы.

Например, давайте возьмем блок с шириной 200px и высотой 200px, padding 10px по всем сторонам и рамкой 2px по всем сторонам. Браузер не видит блок 200px. Браузер вычисляет горизонтальное пространство, необходимое для отображения блока, и оно равно 224px: 200 (ширина)+2(левая рамка)+10(левый padding)+10(правый padding)+2(правая рамка)=224px. Так как это квадрат, то высота тоже будет равна 224px.

С другой стороны, традиционная блоковая модель за ширину принимает сумму контента, padding’ов и рамки. Это значит, что если ваш блок имеет ширину 200px, то браузер вычислит горизонтальное пространство, необходимое для его отображения, и оно будет равно 200px, включая padding и рамку. Результат более предсказуем, и с ним легче работать.

По умолчанию все браузеры используют блоковую модель W3C. Модель можно задать вручную с помощью свойства box-sizing. Принимаются два значения content-box (W3C) и border-box (традиционная модель). Традиционная модель интуитивно понятнее, что сделало ее самой популярной среди веб-разработчиков.

Ниже показано, как с помощью box-sizing использовать традиционную модель в своем проекте:

box — sizing : border — box ;

box — sizing : inherit ;

Если вы быстрее запоминаете, когда делаете что-то сами, то попробуйте поэкспериментировать с забавным интерактивным демо от Guy Routledge.

Установка margin и padding

С помощью свойств padding-top, padding-right, padding-bottom и padding-left можно управлять внутренним отступом по всем четырем сторонам элемента. Также padding можно задавать через сокращенное свойство. Если записано одно значение padding, CSS использует его для определения отступа для всех 4 сторон:

/* все 4 стороны */ padding: 10px;

Если представлено 3 значения, первое отвечает за верх, второе за лево и право, а третье за низ:

/* верх | горизонталь | низ */ padding: 1em 20px 2em;

Если представлены все 4 значения, то каждое отвечает за верх, право, низ и лево соответственно:

/* верх | право | низ | лево */ padding: 10px 10% 2em 15%;

В демо ниже оранжевый фон – это область контента для разных элементов, белая область между рамкой и контентом – padding:

Внешний отступ можно, как и padding, контролировать по всем 4 сторонам с помощью свойств margin-top, margin-right, margin-bottom и margin-left. Также margin можно задать для всех 4 сторон разом с помощью сокращенного свойства.

/* все 4 стороны */ margin: 10px; /* вертикаль | горизонталь */ margin: 2em 4em; /* верх | горизонталь | низ */ margin: 2em auto 2em; /* верх | право | низ | лево */ margin: 10px 10% 2em 15%;

Что нужно помнить

Используйте правильные единицы измерения

При работе с padding и margin избегайте абсолютных единиц измерения. Такие единицы не адаптируются под изменения размеров шрифта и ширины экрана.

Скажем, вы задали ширину элемента на 50% и margin 15px. На ширине 1200px ширина элемента будет составлять 600px, а margin так и будет 15px. На ширине 769px ширина элемента будет равна 384px, а margin все еще будет 15px.

Ширина элемента изменилась на 36%, а его margin остался прежним. В большинстве случаев это не самая большая проблема. Однако если задать margin элемента в процентах, то вы будете лучше контролировать макет страницы на всех экранах. Все будет выглядеть пропорционально без резких прыжков в значениях примененных margin и padding.

Точно так же, возможно, вы захотите добавить padding к текстовым элементам на странице. В большинстве случаев хочется, чтобы padding был пропорционален размеру шрифта на элементе. На абсолютных единицах сделать это невозможно. Однако если задать padding в em, то он будет автоматически подстраиваться под размер шрифта. Демо ниже демонстрирует масштабирование в действии.

Как браузеры вычисляют margin и padding для разных единиц измерения

Браузеры по-разному вычисляют конечные значения margin и padding в зависимости от единиц измерения.

Margin и padding, заданные в процентах, вычисляются относительно ширины контейнера. То есть padding 5% будет равен 5px, если ширина контейнера составляет 100px, или 50px, если ширина контейнера равна 1000px. Не забывайте, что верхнее и нижнее значения вычисляются также по ширине контейнера.

В случае с em значение margin и padding основывается на размере шрифта данного элемента. В предыдущем демо padding на трех нижних текстовых элементах равен 1em. Из-за разного размера шрифта вычисленное значение padding будет всегда разным.

Также существует 4 вьюпорт единицы измерения vw, vh, vmin и vmax. В этом случае значения margin и padding будут зависеть от вьюпорта. Например, padding 5vw будет равен 25px при ширине вьюпорта 500px, а padding 10vw будет равен 50px на том же вьюпорте. Более подробно изучить данные единицы измерения можно в статье на сайте SitePoint «CSS вьюпорт единицы измерения: быстрый старт ».

Если вы новичок, знание принципов работы этих единиц поможет вам быстро понять, почему padding и margin на HTML-элементах меняются в зависимости от размеров родителя, шрифта или даже вьюпорта. А это даст вам способность контролировать ваш макет.

Схлопывание margin’ов

Также вам нужно знать про концепцию схлопывания margin’ов. В определенных ситуациях верхний и нижний margin’ы на двух элементах могут схлопываться в один. Данный феномен называется схлопывание margin’ов.

Скажем, у вас есть два элемента один под другим, т.е. на одном уровне. Если на первом элементе задать margin-bottom 40px, а на втором margin-top 25px, то общий margin между элементами не будет равен 65px. Отступ будет равен значению большего margin’а, т.е. 40px.

Точно так же margin может схлопываться между родителем и первым или последним дочерним элементом. Это происходит, если нет рамки, padding’а или инлайнового контента, отделяющего дочерний и родительский margin’ы. В таком случае если на родителе нет padding’а или рамки, margin дочернего элемента будет «вытекать» из родителя.

Можно исправить такое поведение. Для этого необходимо добавить барьер между родительским margin и дочерним. В демо ниже показано, как добавление рамки или padding’а на родительский элемент позволяет исправить проблему.

В случае с отрицательными margin’ами конечное значение схлопнувшегося margin’а равно сумме положительного margin’а с самым маленьким отрицательным. Более подробно тему схлопывания margin’ов можно изучить в статье «схлопывание margin’ов » от Adam Roberts.

Интересные способы применения margin и padding

Иногда с помощью margin и padding можно решить проблемы с макетом. Ниже описано несколько примеров:

Сохранение соотношения сторон в изображениях

Зачастую у изображений на странице разное соотношение сторон. Если вам нужно показать все изображения с одинаковым соотношением сторон, вам поможет CSS padding.

Для этого нужно задать height родителя в ноль, а свойство padding-top родителя должно быть равно значению соотношения сторон, выраженному в процентах.

Например, соотношение сторон 16:9 достигается путем padding: 56.25% 0 0 0. Значение 56.25 получено путем (9/16)*100. С помощью этого метода можно вычислять проценты padding’а для любого другого соотношения сторон.

Заключение

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

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками

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

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

  • padding-top: значение;
  • padding-right: значение;
  • padding-bottom: значение;
  • padding-left: значение;
  • margin-top: значение;
  • margin-right: значение;
  • margin-bottom: значение;
  • margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .

Также существует очень удобная вещь как сокращенная запись margin и padding CSS . Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

  • 4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева: padding: 2px 4px 5px 10px;
  • 3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней: padding: 3px 6px 9px;
  • 2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой: padding: 6px 12px;
  • 1 значение: задаются одинаковые отступы для всех сторон элемента: padding: 3px;

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.

Расстояние между блоками равно большему из значений

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

  • Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
  • Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
    20 + (-18) = 20 — 18 = 2 пикселя.
  • Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
  • В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
  • Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Margin или padding? Размышления о том, что и где использовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    В итоге.

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

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

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

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

    Данная статья, судя по названию претендующая на исчерпывающее руководство по применению полей и внутренних отступов, мягко говоря, таковым не является. Вопрос раскрыт лишь частично и применительно к весьма специфической ситуации. Дело в том, что margin и padding — это совершенно разные, не пересекающихся инструменты форматирования, хотя они и представляют собой два компонента одной концепции — модели бокса. Более интригующей стороной этой статьи можно назвать использование малоизвестных CSS селекторов. Лоботомированная сова, неплохо, да? Один из разработчиков даже признался, что за 20 лет работы он первый раз сталкивается с этим селектором.

    Есть и другие моменты, на которые нужно обратить внимание:

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

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

    Как установить CSS margin и padding (и крутые советы по раскладке)

    Дата публикации: 2020-05-17

    От автора: когда я только начал изучать CSS, я все время путался в margin и padding. Они казались очень похожими, а в некоторых случаях давали одинаковый результат. В этом уроке вы увидите разницу между CSS margin и padding, а также узнаете, как эти свойства влияют на пространство между элементами на странице. Также мы обсудим схлопывание margin’ов, использование разных единиц измерения при создании адаптивных сайтов. Завершим статью мы парочкой советов по раскладке с использованием margin и padding.

    Блочная модель

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

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

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

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Если нужно увеличить или уменьшить расстояние между элементами, используйте margin. Свойство margin никак не влияет на размеры элемента.

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

    По блоковой модели W3C ширина элемента вычисляется из контента блока без учета padding и margin. Padding и рамка добавляются поверх заданных размеров, что может привести к непредсказуемым последствиям для макета страницы.

    Например, давайте возьмем блок с шириной 200px и высотой 200px, padding 10px по всем сторонам и рамкой 2px по всем сторонам. Браузер не видит блок 200px. Браузер вычисляет горизонтальное пространство, необходимое для отображения блока, и оно равно 224px: 200 (ширина)+2(левая рамка)+10(левый padding)+10(правый padding)+2(правая рамка)=224px. Так как это квадрат, то высота тоже будет равна 224px.

    С другой стороны, традиционная блоковая модель за ширину принимает сумму контента, padding’ов и рамки. Это значит, что если ваш блок имеет ширину 200px, то браузер вычислит горизонтальное пространство, необходимое для его отображения, и оно будет равно 200px, включая padding и рамку. Результат более предсказуем, и с ним легче работать.

    По умолчанию все браузеры используют блоковую модель W3C. Модель можно задать вручную с помощью свойства box-sizing. Принимаются два значения content-box (W3C) и border-box (традиционная модель). Традиционная модель интуитивно понятнее, что сделало ее самой популярной среди веб-разработчиков.

    Ниже показано, как с помощью box-sizing использовать традиционную модель в своем проекте:

    Если вы быстрее запоминаете, когда делаете что-то сами, то попробуйте поэкспериментировать с забавным интерактивным демо от Guy Routledge.

    Установка margin и padding

    С помощью свойств padding-top, padding-right, padding-bottom и padding-left можно управлять внутренним отступом по всем четырем сторонам элемента. Также padding можно задавать через сокращенное свойство. Если записано одно значение padding, CSS использует его для определения отступа для всех 4 сторон:

    Если записано два значения padding, то первое значение отвечает за верхний и нижний отступ, а второе за левый и правый padding:

    Если представлено 3 значения, первое отвечает за верх, второе за лево и право, а третье за низ:

    Если представлены все 4 значения, то каждое отвечает за верх, право, низ и лево соответственно:

    В демо ниже оранжевый фон – это область контента для разных элементов, белая область между рамкой и контентом – padding:

    Внешний отступ можно, как и padding, контролировать по всем 4 сторонам с помощью свойств margin-top, margin-right, margin-bottom и margin-left. Также margin можно задать для всех 4 сторон разом с помощью сокращенного свойства.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    Что нужно помнить

    Используйте правильные единицы измерения

    При работе с padding и margin избегайте абсолютных единиц измерения. Такие единицы не адаптируются под изменения размеров шрифта и ширины экрана.

    Скажем, вы задали ширину элемента на 50% и margin 15px. На ширине 1200px ширина элемента будет составлять 600px, а margin так и будет 15px. На ширине 769px ширина элемента будет равна 384px, а margin все еще будет 15px.

    Ширина элемента изменилась на 36%, а его margin остался прежним. В большинстве случаев это не самая большая проблема. Однако если задать margin элемента в процентах, то вы будете лучше контролировать макет страницы на всех экранах. Все будет выглядеть пропорционально без резких прыжков в значениях примененных margin и padding.

    Точно так же, возможно, вы захотите добавить padding к текстовым элементам на странице. В большинстве случаев хочется, чтобы padding был пропорционален размеру шрифта на элементе. На абсолютных единицах сделать это невозможно. Однако если задать padding в em, то он будет автоматически подстраиваться под размер шрифта. Демо ниже демонстрирует масштабирование в действии.

    Как браузеры вычисляют margin и padding для разных единиц измерения

    Браузеры по-разному вычисляют конечные значения margin и padding в зависимости от единиц измерения.

    Margin и padding, заданные в процентах, вычисляются относительно ширины контейнера. То есть padding 5% будет равен 5px, если ширина контейнера составляет 100px, или 50px, если ширина контейнера равна 1000px. Не забывайте, что верхнее и нижнее значения вычисляются также по ширине контейнера.

    В случае с em значение margin и padding основывается на размере шрифта данного элемента. В предыдущем демо padding на трех нижних текстовых элементах равен 1em. Из-за разного размера шрифта вычисленное значение padding будет всегда разным.

    Также существует 4 вьюпорт единицы измерения vw, vh, vmin и vmax. В этом случае значения margin и padding будут зависеть от вьюпорта. Например, padding 5vw будет равен 25px при ширине вьюпорта 500px, а padding 10vw будет равен 50px на том же вьюпорте. Более подробно изучить данные единицы измерения можно в статье на сайте SitePoint «CSS вьюпорт единицы измерения: быстрый старт».

    Если вы новичок, знание принципов работы этих единиц поможет вам быстро понять, почему padding и margin на HTML-элементах меняются в зависимости от размеров родителя, шрифта или даже вьюпорта. А это даст вам способность контролировать ваш макет.

    Схлопывание margin’ов

    Также вам нужно знать про концепцию схлопывания margin’ов. В определенных ситуациях верхний и нижний margin’ы на двух элементах могут схлопываться в один. Данный феномен называется схлопывание margin’ов.

    Скажем, у вас есть два элемента один под другим, т.е. на одном уровне. Если на первом элементе задать margin-bottom 40px, а на втором margin-top 25px, то общий margin между элементами не будет равен 65px. Отступ будет равен значению большего margin’а, т.е. 40px.

    Точно так же margin может схлопываться между родителем и первым или последним дочерним элементом. Это происходит, если нет рамки, padding’а или инлайнового контента, отделяющего дочерний и родительский margin’ы. В таком случае если на родителе нет padding’а или рамки, margin дочернего элемента будет «вытекать» из родителя.

    Можно исправить такое поведение. Для этого необходимо добавить барьер между родительским margin и дочерним. В демо ниже показано, как добавление рамки или padding’а на родительский элемент позволяет исправить проблему.

    В случае с отрицательными margin’ами конечное значение схлопнувшегося margin’а равно сумме положительного margin’а с самым маленьким отрицательным. Более подробно тему схлопывания margin’ов можно изучить в статье «схлопывание margin’ов» от Adam Roberts.

    Интересные способы применения margin и padding

    Иногда с помощью margin и padding можно решить проблемы с макетом. Ниже описано несколько примеров:

    Центрирование элементов внутри родителей

    С помощью margin очень просто центрировать блочные элементы внутри родителя. Нужно всего лишь поставить margin-left и margin-right в auto.

    Мастер Йода рекомендует:  Тизерная реклама для сайта как способ заработать
    Добавить комментарий