margin-bottom в CSS


Содержание

margin-bottom

Свойство CSS margin-bottom используется для указания размера нижнего внешнего поля элемента, которое находится за нижней границей его рамки (border-bottom). В отличие от нижнего внутреннего отступа (padding-bottom), цвет поля всегда прозрачный, поэтому сквозь него просвечивается фон окружающего контекста.

Расположение нижнего поля — margin-bottom

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

Тип свойства

Применяется: ко всем элементам, кроме тегов , , , , , , , и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row и table-cell.

Значения

Значением свойства margin-bottom является указание размера нижнего поля элемента одним из следующих способов:

  • Размер — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Допускаются отрицательные значения.
  • Проценты — расстояние в процентах (%), где за 100% берется ширина (именно ширина) элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (position: static или relative ) расчет полей идет относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то ширины тела документа ( ).
    2. Процентный размер полей самого тела документа считается относительно ширины корневого элемента ( ).
    3. Для элементов с position: fixed поля считаются относительно ширины окна браузера.
    4. Для элементов с position: absolute поля считаются относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно ширины окна браузера.

    Допускается указывать отрицательные процентные значения.

  • auto — размер поля рассчитывается браузером автоматически исходя из доступного пространства ниже элемента.
  • inherit — наследует значение margin-bottom от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: в спецификации указан ноль (0), но на самом деле у некоторых HTML-элементов браузеры изначально устанавливают определенный размер полей. Например, у параграфов присутствуют ненулевые поля сверху и снизу.

Синтаксис

Пример CSS: использование margin-bottom

Результат. Использование свойства CSS margin-bottom.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit и в некоторых случаях неправильно считают нижнее поле абсолютно позиционируемых элементов, когда margin-bottom : auto .

Кроме этого IE 6.0 неправильно рассчитывает процентные значения margin-bottom .

Всё, что вам нужно знать про CSS Margin

Одним из первых, что многие из нас усвоили, когда изучали CSS, были особенности разных составляющих блока в CSS, описываемые как «Блочная Модель CSS». Один из элементов в блочной модели — margin (внешний отступ), прозрачная область вокруг блока, которая отталкивает другие элементы от содержимого данного блока. Свойства margin-top , margin-right , margin-bottom и margin-left были описаны еще в CSS1, вместе с сокращенным свойством margin для одновременной установки в всех четырёх свойств.

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

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

Как и во всех статьях про составляющие Блочной Модели CSS, мы должны определить, что подразумеваем под этим, и как модель классифицировалась в разных версиях CSS. Блочная модель относится к тому, как разные составляющие блока — content (содержимое), padding (внутренние отступы), border (рамка) и margin (внешние отступы) — расположены и взаимодействуют друг с другом. В CSS1, Блочная модель была изображена с помощью ASCII-диаграммы, показанной на картинке ниже

Все четыре свойства для каждой стороны блока и сокращенное свойство margin были определены в CSS1.

Спецификация CSS2.1 имеет иллюстрацию для демонстрации блочной модели и также определяет термины, которые мы продолжаем использовать для описания разных блоков. Спецификация описывает content box, padding box, border box, и margin box, каждый из которых определяется границами content, padding, border и margin соответственно.

В данный момент существует спецификация Блочной Модели 3 версии в качестве рабочего проекта. При определении Блочной Модели и margins, она возвращает нас к CSS2, поэтому на протяжении статьи мы будем использовать определение из CSS2.

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

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

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

Margin схлопываются в следующих ситуациях:

  • Смежные сестринские элементы (имеющие одного родителя)
  • Пустые блоки
  • Родитель и первый/последний дочерний элемент

Смежные сестринские элементы

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

В CodePen-примере ниже представлены три div элемента. У первого элемента верхний и нижний margin равны 50px, у второго — 20px, у третьего — 3em. Margin между двумя первыми элементами получается 50px, так как меньший margin нижнего элемента поглощается большим margin верхнего элемента. Margin между вторыми двумя элементами получается 3em, так как 3em больше, чем 20 пикселей у нижнего margin второго элемента.

Пустые блоки

Если блок пустой, его верхний и нижний margin могут схлопываться друг с другом. В следующем CodePen-примере второй элемент с классом empty (не виден, так как пустой) имеет верхний и нижний margin по 50px, однако, пространство между первым и третьим элементами не 100 пикселей, а 50. Это является следствием схлопывания двух margin.

Добавление чего-либо в блок (даже внутренних отступов — padding) приведет к тому, что верхний и нижний margin будут использоваться, а не схлопываться.


Родитель и первый/последний дочерний элемент

Этот сценарий схлопывания margin озадачивает людей чаще, чем другие, так как он не понятен интуитивно. В следующем CodePen у нас есть div с классом wrapper (обертка), и я задала этому div свойство outline красного цвета, чтобы было видно, его границы. Все три дочерних элемента имеют margin по 50 пикселей. Тем не менее, первый и последний элементы примыкают к границам элемента-обертки; нет отступа в 50 пикселей между элементом и оберткой.

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

Схлопываются только margin

Последний пример также подчеркивает кое-что про схлопывание margin. В CSS2 только вертикальные (верхний и нижний) margin были рассчитаны на схлопывание. Поэтому на примере выше margin слева и справа не схлопываются и заканчиваются внутри обертки.

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

Предотвращение схлопывания

Margin не схлопываются, если элементу задано абсолютное позиционирование или свойство float . Однако, если вы попали в ситуацию, когда margin схлопываются, как это предотвратить?

Схлопывание margin не происходит в ситуации, когда что-то находится между ними.

Например, верхний и нижний margin пустого блока не схлопываются, если блоку задана рамка (border) или внутренние отступы (padding). В примере ниже я добавила блоку padding размером 1px. Теперь сверху и снизу блока есть margin по 50px.

В этом есть логика: если пустой блок не имеет border или padding, он становится фактически невидимым. Например, это может быть пустой параграф, помещенный в разметку вашей CMS. Если бы ваша CMS добавляла лишние элементы параграфов, вы, вероятно, не хотели бы, чтобы они вызывали большие отступы между другими параграфами из-за того, что их margin учитываются. Добавьте что-нибудь в блок и получите эти отступы.

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

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

Создание «Блочного контекста форматирования»

Новый «Блочный контекст форматирования» (BFC) предотвратит выпадение margin за пределы родительского элемента. Если мы снова посмотрим на пример с первым и последним дочерними элементами, margin которых выпадают за пределы элемента-обёртки, и зададим обёртке display: flow-root , создав таким образом BFC, margin дочерних элементов останутся внутри.

Чтобы узнать больше о display: flow-root , читайте мою статью «Understanding CSS Layout And The Block Formatting Context». Изменение значения свойства overflow на auto будет иметь такой же эффект, поскольку это также создает новый BFC, хотя он может приводить к появлению полос прокрутки, которые не нужны в определенных случаях

Flex и Grid-контейнеры

Flex-контейнер устанавливает новый гибкий (flex) контекст форматирования содержимого. Это то же самое, что установка блочного контекста форматирования, за исключением того, что flex-разметка используется вместо блочной разметки. Например, плавающие элементы (float) не работают внутри flex-контейнера и margin flex-контейнера не схлопываются с margin дочерних элементов.
— Flexbox Level 1

Если мы возьмём пример выше и сделаем обёртку Flex-контейнером, указав направление главной оси flex-direction: column, станет понятно, что теперь margin дочерних элементов не выходят за рамки обёртки. Дополнительно, margin между смежными flex-элементами не схлопываются, поэтому мы получаем расстояние в 100 пикселей между flex-элементами, что является суммой верхнего и нижнего margin, которые равны 50px каждый.

Стратегии margin для вашего сайта

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

Заметка: У Гарри Робертса есть отличная публикация, подробно описывающая причины, почему установка margin только в одном направлении является хорошей идеей, и не только из-за решения проблем схлопывания.

Этот подход не решает проблему выпадения margin дочерних элементов за пределы родителя, с которой вы можете столкнуться. Эта конкретная проблема, как правило, менее распространена и понимание того, почему это происходит, может помочь найти решение. Идеальное решение проблемы заключается в том, чтобы компонентам, которые требуют этого, задать display: flow-root , а фолбеком (запасным вариантом) для старых браузеров вы можете использовать overflow , чтобы создать BFC (блочный контекст форматирования); превратить родительский элемент во flex-контейнер; или даже задать padding размером 1px. Не забывайте, что вы можете использовать запрос поддержки свойств браузером (support), чтобы определить, поддерживается ли свойство display: flow-root , чтобы только старые браузеры получили менее оптимальное решение.

Я считаю, что в большинстве случаев понимание того, почему margin схлопываются (или нет), является ключевым моментом. Это позволит вам определять, как нужно бороться с этим в каждом конкретном случае. Какой бы способ вы не выбрали, поделитесь этой информацией с вашей командой. Довольно часто схлопывание margin является немного загадочным, поэтому и способы борьбы с ней не всегда очевидны. Комментарий в вашем коде может быть уместным — вы можете даже указать в нём ссылку на эту статью и помочь поделиться знаниями о схлопывании margin.

Я решила, что дополню эту статью некоторыми дополнительными данными, имеющими отношение к margin.

Процентные margin

Когда вы используете проценты в CSS, это должны быть проценты от чего-то. Margin (так же, как и padding) заданные в процентах, всегда будут вычисляться относительно ширины родительского элемента. Это значит, что при использовании процентов, у вас всегда будут равные margin со всех сторон вокруг элемента.

В CodePen-примере ниже, у меня есть обёртка шириной 200px, внутри которой блок, имеющий margin = 10%. Со всех сторон margin получается 20px, что равно 10% от 200px.

Margin в мире, зависящем от потока

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

После работы с логическими, относительными к потоку направлениями, становится легче говорить про начало и конец блока, чем про верх и низ. Чтобы делать это было проще, в CSS была введена спецификация Логических свойств и Значений. Она заменяет физические свойства на свойства, относительные к потоку.

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

  • margin-top = margin-block-start
  • margin-right = margin-inline-end
  • margin-bottom = margin-block-end
  • margin-left = margin-inline-start

У нас также есть два новых сокращенных свойства:

  • margin-block
  • margin-inline

В следующем CodePen-примере я использовала относительные к потоку ключевые слова и потом меняла режим написания блока. Вы можете видеть, как margin следуют за текстовым потоком, а не привязаны к физическим сторонам.

Вы можете почитать больше про логические свойства и значения на MDN или в моей статье «Understanding Logical Properties And Values» на Smashing Magazine.

В завершение

Сейчас вы знаете большую часть из того, что стоит знать о margin. Кратко:

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


Свойство CSS margin-bottom

Описание и использование

Свойство CSS margin-bottom задает величину нижнего отступа от элемента до окружающих его элементов.

Заметка: Разрешены отрицательные значения.

Значение по умолчанию
Наследование нет
Версия CSS CSS 1
Синтаксис JavaScript object.style.marginBottom=»10px»

Поддержка в браузерах

Свойство margin-bottom поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

Свойство margin

Свойство margin задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные – нет.

Например, вот документ с вертикальными и горизонтальными отступами:

Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative , при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

То есть, элемент продолжает полноценно участвовать в потоке.

Пример: вынос заголовка

Например, есть документ с информационными блоками:

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

Margin-bottom в CSS

Свойство margin-bottom задает расстояние (ширину отступа) от нижней границы блока до ближайших элементов или до краев окна браузера.

Это свойство применимо ко всем элементам.

Значение

Значение задается в единицах длины, принятых в CSS (подробнее здесь. ) или в % ,

— auto – автоматически задается браузером,

— inherit — принимает значение свойства родительского элемента.

Значение по умолчанию

Пример

Пример — Свойство margin-bottom

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Свойство margin-bottom

: #CC0000 solid 2px ; padding : 5px ; «> Этот абзац не имеет заданных отступов. Расстояние от него до следующего абзаца и до краев окна браузера установлено автоматически.

: #CC0000 solid 2px ; padding : 5px ; margin-bottom : 50px ; «> У этого абзаца отступ от нижней его границы до следующего абзаца составляет 50 пикселей.

: #CC0000 solid 2px ; padding : 5px ; «> Величина отступов для данного абзаца также не указана.

CSS margin:auto — Как это работает?

Использование margin:auto , чтобы отцентрировать блочный элемент по горизонтали, это хорошо известный способ. Но задумывались ли вы, как это работает?


Результат действия значения auto зависит типа элемента и контекста. Для отступов сверху CSS auto может означать одно из двух: занять все свободное пространство или 0 пикселей. В зависимости от этого будет задаваться различная структура.

«auto» — занять все доступное пространство

Это наиболее распространенный способ использования auto для отступов. Если мы задаем auto для левого и правого отступов одного элемента, они равномерно займут все доступное в контейнере по горизонтали пространство. Таким образом элемент расположится по центру.

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

Имитация плавающего поведения через распределение доступного пространства

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

«auto» — задать 0 пикселей

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

Это будет только нарушать изначальную структуру. В том числе и для отступа текста сверху CSS . Следовательно, auto будет задавать значение 0 пикселей для отступов этих элементов.

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

Значение auto будет определять отступ в 0 пикселей, когда для блочного элемента задана ширина auto или 100% . Обычно он занимает всю ширину контейнера, следовательно, на ширину отступа останется 0 пикселей.

Что происходит с вертикальными отступами со значением auto?

auto и для отступа сверху CSS , и для нижнего отступа всегда вычисляется как 0 пикселей ( за исключением абсолютно позиционированных элементов ). В спецификации W3C указано следующее:

«Если для “margin-top” или “margin-bottom” задано «auto», для них используется значение, равное 0″.

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

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

Или из-за эффекта объединения отступов ( слияния отступов соседних элементов ). Это еще одно исключение из данного правила определения вертикальных отступов.

Центрирование абсолютно позиционированных элементов

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

В другой спецификации W3C сказано:

«Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right…»
» Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left , width и right не должно задаваться значение auto ( их значение по умолчанию ). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static…»

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top , height и bottom не должны иметь значение auto .

Теперь, объединив все это, мы получим следующее:

Заключение

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

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

Данная публикация представляет собой перевод статьи « CSS – margin auto – How it Works » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS margin-bottom Property

Example

Set the bottom margin for a

element to 25 pixels:

More «Try it Yourself» examples below.

Definition and Usage

The margin-bottom property sets the bottom margin of an element.

Note: Negative values are allowed.

Default value:
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.marginBottom=»100px» Try it


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
margin-bottom 1.0 6.0 1.0 1.0 3.5

CSS Syntax

Property Values

Value Description Play it
length Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units Play it »
% Specifies a bottom margin in percent of the width of the containing element Play it »
auto The browser calculates a bottom margin Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

In the example above, the

element has a top and bottom margin of 30px. The

element has a top and bottom margin of 20px.

This means that the vertical margin between

should be 50px (30px + 20px). But due to margin collapse, the actual margin ends up being 30px!

More Examples

Example

Set the bottom margin for a

element to 10% of the width of the container:

Example

Set the bottom margin for a

element to 2 em:

COLOR PICKER

HOW TO

SHARE

CERTIFICATES

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Certificates

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

Внешние отступы, свойство margin

Свойство margin задаёт внешние отступы блока — отступы от внешней границы элемента до границ родительского элемента или до соседних элементов.

Внешние отступы для разных сторон задаются с помощью свойств margin-top , margin-right , margin-bottom и margin-left :

Сокращённое свойство margin работает аналогично свойству padding , только задаёт внешние отступы, а не внутренние:


Одинаковые отступы со всех сторон.

Сверху и снизу 5px , справа и слева 10px .

Сверху 5px , слева и справа 10px , снизу 15px .

Верхний, правый, нижний, левый отступы соответственно.

Строчные боксы реагируют только на горизонтальные внешние отступы.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 20 января по 22 марта 2020. До 26 ноября цена 13 900 14 900

(HTML) Margin bottom for tables?

I’m making an HTML email and the program that loads these do not accept separate CSS file, so everything has to be inline. For some reason margins for tables are not working. All I need is a gap between the bottom of a table and the next one.

What I have so far:

There is no gap created at all.

I also tried padding-bottom, doesn’t do anything either.

Is using
the only way then? Seems kind of awkward.

1 Answer 1

The way you were using margin was incorrect. Margin has to be inside of a style attribute. The other attributes are table specific attributes that usually can only be used directly on tables. You can use margin, but if I were you, I’d use the
tag because that will always be rendered the same way by all devices. Margin can be a bit iffy with some email systems like Outlook.

CSS: margin-bottom property

This CSS tutorial explains how to use the CSS property called margin-bottom with syntax and examples.

Description

The CSS margin-bottom property defines the margin on the bottom of an element.

Syntax

The syntax for the margin-bottom CSS property is:

Parameters or Arguments

The margin to apply to the bottom of the element. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, .
div < margin-bottom: 5px; >
div
percentage Percentage value
div
auto Used for centering blocks
div
inherit Element will inherit the margin-bottom from its parent element
div
  • The value in the CSS margin-bottom property can be expressed as either a fixed value or as a percentage.
  • Negative values are allowed in the CSS margin-bottom property.
  • When the value is provided as a percentage, it is relative to the width of the containing block.
  • See also margin, margin-top, margin-left, and margin-right.

Browser Compatibility

The CSS margin-bottom property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the margin-bottom property below, exploring examples of how to use this property in CSS with a fixed value as well as a percentage value.

Using Fixed Value

Let’s look at a CSS margin-bottom example where we have provided the value as a fixed value.

In this example, we have provided a value of 5px which would apply to the bottom of the element.

You can also express fixed values in em’s when using the margin-bottom property.

In this margin-bottom example, we have provided a value of 2em which would apply to the bottom of the element.

Using Percentage

Let’s look at a CSS margin-bottom example where we have provided the value as a percentage.

In this CSS margin-bottom example, we have provided a value of 2% which would apply to the bottom of the element.

Using Auto

Let’s look at an example where we have provided the value as auto.

In this example, we have set the bottom margin to auto for the

Илон Маск рекомендует:  Что такое код asp logextfilemethod
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL