Css font bottom margin

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin — Individual Sides

CSS has properties for specifying the margin for each side of an element:

All the margin properties can have the following values:

• auto — the browser calculates the margin
• length — specifies a margin in px, pt, cm, etc.
• % — specifies a margin in % of the width of the containing element
• inherit — specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

Margin — Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

  Example

  Use the margin shorthand property with four values:

  If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

    Example

    Use the margin shorthand property with three values:

    If the margin property has two values:

    • margin: 25px 50px;
      • top and bottom margins are 25px
      • right and left margins are 50px

      Example

      Use the margin shorthand property with two values:

      If the margin property has one value:

      Example

      Use the margin shorthand property with one value:

      The auto Value

      You can set the margin property to auto to horizontally center the element within its container.

      The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

      Example

      The inherit Value

      Example

      div <
      border: 1px solid red;
      margin-left: 100px;
      >

      All CSS Margin Properties

      Property	Description
      margin	A shorthand property for setting all the margin properties in one declaration
      margin-bottom	Sets the bottom margin of an element
      margin-left	Sets the left margin of an element
      margin-right	Sets the right margin of an element
      margin-top	Sets the top margin of an element

      Источник

      margin-bottom

      Свойство CSS margin-bottom устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное — сокращает.

      Интерактивный пример

      

      Это свойство не имеет воздействия на незамещаемые элементы, такие как или .

      Синтаксис

      /* числовые значения */ margin-bottom: 10px; /* Абсолютная длина */ margin-bottom: 1em; /* относительно размера текста */ margin-bottom: 5%; /* относительно длины родительского блока */ /* Значения-ключевые слова */ margin-bottom: auto; /* Глобальные значения */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; 

      Свойство margin-bottom может быть выражено как ключевое слово auto , или как , или как . Значение может быть положительным, нулевым или отрицательным.

      Значения

      Размер отступа — фиксированная величина.

      Размер отступа в процентах — размер относительно длины родительского блока.

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

      Формальный синтаксис

      Пример

      HTML

      div class="container"> div class="box0">Блок 0div> div class="box1">Блок 1div> div class="box2">Отрицательное значение margin Блока 1 тянет меня вверхdiv> div> 

      CSS

      CSS устанавливает нижний отступ и высоту для элементов div .

      .box0  margin-bottom:1em; height:3em; > .box1  margin-bottom:-1.5em; height:4em; > .box2  border:1px dashed black; border-width:1px 0; margin-bottom:2em; > 

      Несколько дополнений к свойствам элемента div и элемента класса container сделают более наглядным эффект использования свойства margin .

      .container  background-color:orange; width:320px; border:1px solid black; > div  width:320px; background-color:gold; > 

      Спецификации

      Начальное значение	0
      Применяется к	все элементы, кроме элементов с табличным типом display , отличным от table-caption , table и inline-table . Это также применяется к ::first-letter и ::first-line .
      Наследуется	нет
      Проценты	ссылается на ширину содержащего блока
      Обработка значения	процент, как указан, или абсолютная длина
      Animation type	длина

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

      BCD tables only load in the browser

      Found a content problem with this page?

      This page was last modified on 5 дек. 2022 г. by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      margin-bottom

      CSS свойство margin-bottom устанавливает внешний отступ снизу элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного под ним. Обратите внимание, для строчных элементов (display : inline; ) могут быть установлены только внешние отступы с левой и с правой стороны.

      

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

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

      Объединение полей

      1. Поля сестринских элементов, расположенных один под другим и находящихся в потоке документа, объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента ( margin-bottom ) составляет 10px , а нижнего элемента (margin-top) — 20px , единое поле в этом случае будет высотой 20px .
      2. Объединение полей родительского и дочернего элемента, находящихся в потоке документа, происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto . Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.

      Синтаксис

      margin-bottom: величина|auto|inherit;

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

      Значение	Описание
      auto	Автоматически вычисляется браузером как ноль.
      величина	Указывает размер поля в единицах измерения, используемых в CSS.
      %	Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
      inherit	Указывает, что значение наследуется от родительского элемента.

      Источник

      Читайте также:  Оператор double в java