Отступ слева css margin

margin-left

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

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

Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется схлопыванием внешних отступов.

В редких случаях, когда ширина (т.е., когда все значения width , margin-left , border , padding , область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .

Синтаксис

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

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

Значения

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

  • : Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto , расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:	Значение display	Значение float	Значение position	Расчётное значение auto	Комментарий
    inline , inline-block , inline-table	любое	static или relative	0	Строчный способ разметки
    block , inline , inline-block , block , table , inline-table , list-item , table-caption	любое	static или relative	0 , кроме случаев, когда margin-left и margin-right установлены как auto . В этом случае устанавливается значение, центрирующее элемент внутри его родителя	Блочный способ разметки
    block , inline , inline-block , block , table , inline-table , list-item , table-caption	left или right	static или relative	0	Блочный способ разметки (плавающие элементы)
    любое table-* , кроме table-caption	любое	любое	0	Внутренние table-* элементы не имеют отступов, вместо этого используйте border-spacing (en-US)
    любое, кроме flex , inline-flex , или table-*	любое	fixed или absolute	0 , кроме случаев, когда margin-left и margin-right установлены как auto . В этом случае, устанавливается значение центрирующее границы области внутри доступной width (ширины), если значение фиксировано.	Способ разметки абсолютным позиционированием
    flex , inline-flex	любое	любое	0 , кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.	Способ разметки с помощью flexbox

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

  Примеры

  .content  margin-left: 5%; > .sidebox  margin-left: 10px; > .logo  margin-left: -5px; > 

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

  Начальное значение	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 7 нояб. 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.

  Источник

  Отступы в CSS (margin и padding)

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

  Внешний отступ (margin)

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

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

  • margin-left — отступ слева
  • margin-right — отступ справа
  • margin-top — отступ сверху
  • margin-bottom — отступ снизу

  Как и с другими универсальными свойствами, которым можно передавать сразу 4 значения для 4 сторон (или углов), свойству margin можно передать 2 значения. К примеру так: «margin: 10px 20px«. Тогда верхний и нижний отступ будут равны 10px, а правый и левый будут равны 20px. А если передать 3 значения «margin: 10px 20px 30px«, то соответственно верхний отступ получится 10px, правый и левый — 20px, а нижний 20px.

  Свойство margin может принимать ещё и значние «auto«. Это значение центрирует элемент по горизонтали.

  С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.

  В результате внутренний элемент будет иметь отступ сверху и снизу в 10px и находиться по центру родительского:

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

  Внутренний отступ (padding)

  Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;)

   
  Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
   

  Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

  • padding-left — отступ слева
  • padding-right — отступ справа
  • padding-top — отступ сверху
  • padding-bottom — отступ снизу

  Проблема расширения (box-sizing)

  У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента «width: 200px;«, но у одного установим свойство padding:

  Оба элемента имеют одинаковую ширину «width: 200px;«. Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box):

  Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .

  Источник

  margin-left

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

  

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

  Синтаксис

  margin-left: значение | auto | inherit

  Значения

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

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

  HTML5 CSS2.1 IE Cr Op Sa Fx

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

  

  Рис. 2. Применение свойства margin-left

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

  [window.]document.getElementById(» elementID «).style.marginLeft

  Браузеры

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

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

  Источник

  margin-left

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

  

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

  Синтаксис

  margin-left: значение | auto | inherit

  Значения

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

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

  HTML5 CSS2.1 IE Cr Op Sa Fx

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

  

  Рис. 2. Применение свойства margin-left

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

  [window.]document.getElementById(» elementID «).style.marginLeft

  Браузеры

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

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

  Источник

  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

        Источник

        Читайте также:  Python send email exchange