margin-left в CSS


Содержание

margin-left

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

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

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

Тип свойства

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

Значения

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

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

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

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

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

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

Синтаксис

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

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

Обратите внимание, что в данном примере верхние поля блоков слились, так как у них не установлены рамки (border) и внутренние отступы (padding).

Версии 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-left : auto .

Кроме этого IE 6.0 неправильно рассчитывает процентные значения margin-left , а также всегда удваивает его значение для всплывающего влево элемента. Данную ошибку можно исправить, применив к плавающему элементу display: inline .

CSS стиль margin-left. Установка отступа слева с помощью margin-left

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

Краткая информация по CSS-свойству margin-left

Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства margin-left

Где auto — указывает, что размер отступов будет рассчитан браузером автоматически.

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

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

Пример применения стиля margin-left

Проиллюстрируем работу margin-left на примере. Нам нужно, чтобы слева от текста, вложенного в тег

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

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

свойство margin-leftCSS3-генератор ☛

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

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

Краткая информация

Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

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

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

Пример

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

Примечание

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

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

Спецификация Статус
CSS Basic Box Model Рабочий проект
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
3 1 3.5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Браузеры

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

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

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

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

Одним из первых, что многие из нас усвоили, когда изучали 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, делитесь со своей командой решениями, которые принимаете, и комментируйте свой код
  • Учитывание блочных и строчных измерений вместо физических сторон верх, право, низ и лево, поможет вам, так как веб движется к тому, чтобы стать независимым от режима написания

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). Порядок следования значений не важен:

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

Margin-left в CSS

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

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

Значение

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

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

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

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

Пример

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

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

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

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

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

Свойство 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 позволяет вынести заголовки над блоком.

Свойство CSS margin

Свойство CSS margin отвечает за задание внешних отступов элемента от других объектов.

Синтаксис CSS margin

  • top — отступ сверху от других элементов;
  • right — отступ справа от других элементов;
  • bottom — отступ снизу от других элементов;
  • left — отступ слева от других элементов;

Значения чаще всего задаются в пикселях. Допускается также задание в виде процентов и других допустимых единицах CSS.

Допускается задание не четырех значений. В зависимости от количества значений действия будут разные:

  • Если задано 3 значения, то первое значение устанавливает отступ сверху, второе — одновременно слева и справа, а третье — снизу
  • Если задано 2 значения, то первое значение устанавливает отступ сверху и снизу, второе — слева и справа от содержимого
  • Если задано 1 значение, то отступ задается одинаковый отступ для всех сторон. Например:

Примечание 2

В отличии от свойства CSS padding, margin допускает отрицательные значения.

Также у margin есть 4 отдельных свойства CSS. Каждое из них отвечает за какое-то направление.

  • margin-left — отступ от левой границы элемента;
  • margin-right — отступ от правой границы элемента;
  • margin-top — отступ от верхней границы элемента;
  • margin-bottom — отступ от левой границы элемента;

Свойство CSS margin используется практически постоянно. Отступы играют важнейшую роль в оформлении html страницы. Приведем примеры

Отступ (свойства padding и margin) | CSS

Разница между padding и margin

В CSS есть два казалось бы похожих свойства: padding и margin [w3.org]. Первое создаёт отступы вокруг содержимого, второе расширяет поле до границы элемента, в том числе отрицательные.

padding раздвигает div, увеличивает его ширину и высоту. А если это не нужно?

Для каждой стороны свой padding и margin

Чем отличаются padding и margin для блочных и встроенных элементов

Проценты у padding и margin

Значение auto у margin

Отрицательный margin

Горизонтальный

Вертикальный

margin-top margin-bottom описание
margin-top игнорируется
+ сначала элемент поднимается на высоту margin-bottom, но не выше значения margin-top, затем отодвигает вниз соседа на остаток (при его наличии)
элемент двигается вниз
+ margin-top больше margin-bottom : элемент двигается вниз, сосед смещается на значение margin-bottom
margin-top меньше margin-bottom : margin-top игнорируется

Схлопывание margin между родителем и дочерними элементами

53 комментария:

Tanka Спасибо! Полезная информация и так наглядно — все по полочкам :) NMitra Радостно) SynVelesa В то, что информация полная и полезная, сомнений нет, но для чайников, вроде меня, по сложности это где то между китайской грамотой и клинописью Междуречья. NMitra Я понимаю, сама была такая. По скриншотам пыталась понять как, куда и что добавить. Тема впервые понадобилась, когда в шаблоне что-то (уже подзабыла что именно) нужно было подвинуть. Понимание придёт по мере практики и необходимости использования данного действия. SynVelesa NMitra, спс Вам, можно я Ваш блог себе в друзья добавлю? NMitra Буду рада! Светлана Ковалева Спасибо, пригодилось! ❀ Оля ❀ все получилось. супер. спасибо, все понятно :) Спутник Самый полезный блог в галактие. Спасибо. NMitra Благодарю на слове, очень приятно)) Анонимный Спасибо! NMitra Рада стараться. Анонимный Спасибо Вам за доходчивое объяснение! NMitra И Вам за повышение настроения и желания дальнейшего улучшения блога! Ivaila А я так и не понял, как работает отрицательный margin NMitra Я тоже долго тыкала по своему же примеру, чтобы до конца разобраться и хоть как-то сформулировать эти выводы словами :))) Смотрите какого результата вы хотите добиться и по первому делу делайте по аналогии. Ivaila А сколько вам потребовалось времени, чтобы начать пользоваться CSS не по аналогии, а опираясь на собственные знания по свойствам CSS? NMitra Вы не заметите как это произойдёт :) Единственное, я не запоминаю точное написание свойств (это относится не только к CSS, но и JavaScript), поэтому ношусь по страницам блога.

Не нужно всё знать, достаточно знать где посмотреть как нужно делать. Ещё мне Mozilla помогает. Правая кнопка просто бесценна и экономит кучу времени. Виталий «Для каждой стороны свой padding и margin

первое значение определяет горизонтальные отступы и поля, второе — вертикальные»
Ошибочка. первое значение это верх-низ, второе — стороны. Счет начинается всегда сверху и всегда первое значение будет — верх, а без пары еще и низ. NMitra Абсолютно верно, спасибо за замечание, подправила. Статья длинная получилась, взгляд замылился. Рита Подскажите пожалуйста, где мне в шаблоне блоггер изменить padding в основной колонке сообщения и в боковых? margin я уже меняла, чтоб увеличить ширину колонок, но ничего не изменилось, потому что большие отступы именно внутри колонок между текстом и внутренним краем колонки. NMitra Сложно сказать не видя блог. Посмотрите эти статьи

http://shpargalkablog.ru/2010/09/sdelat-otstup-dlya-abzatsa-blogger.html Рита Наташа,ставлю ссылку на блог, посмотрите пожалуйста. Он пустой, но я сделала разделители между колонками, чтоб было видно отступы. В главной колонке, где должны быть статьи, я, вроде бы, уменьшила расстояние от текста до краев колонки. А вот в боковых колонках, видите, какой большой отступ от края. Из-за этого на содержимое колонок остается очень мало места в ширину. А если просто расширить боковые колонки, то они же расширяются засчет центральной колонки, а она и так не слишком широкая. В общем хотелось бы уменьшить внутренний отступ от краев колонки в боковых колонках. Я уже совала в шаблон padding: 0px во все места, где встречалось что-то связанное с колонками и виджетами, но эффекта не дало:))) Может Вы что-нибудь подскажете?:) NMitra Добавьте в конец CSS файла

.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner <
padding: 0;
>

.section <
margin: 0;
> Рита Уря! Получилось! Большое Вам спасибо! Целый день вчера мучилась))) Mishechka Наталья, у меня ссылка «Подробнее» под анонсом стоит очень близко к тексту. Я пробовал вставлять разрыв страницы на строку ниже, то всё нормально, но тогда получается большой разрыв в тексте. Как её опустить ниже на строку или ещё как-нибудь? NMitra Mishechka, откройте профиль или подписывайтесь «Имя/URL», где URL — это адрес блога. Я, к сожалению, владею не лучшей памятью, не запоминаю адреса сайтов. Mishechka Наталья, что-то я не понял как открыть профиль.
А блог этот я пока настраиваю. NMitra Попробуйте прописать перед тегом /head

Mishechka Наташа, работают оба варианта, теперь не знаю какой выбрать. Я склоняюсь ко второму — он короче и можно указать padding-top в px. NMitra :) Mishechka Большое спасибо! Mishechka Наталья, выяснилось, работает только на Главной. NMitra Вместо

выберите удобный вариант http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html Mishechka Наталья, а как изменить стиль, цвет, размер шрифта ссылки «Подробнее»? NMitra Посмотрите, я тут писала гостевой пост http://blogohelp.blogspot.ru/2011/02/blog-post.html Mishechka Вы там пишите: после:

Но раздел Variable definitions я удалил, куда теперь писать? NMitra Тогда сами. Например, http://yandex.ru/yandsearch?lr=51&text=размер+шрифта+css Mishechka .jump-link — имеет отношение только к ссылке «Подробнее» или ко всем ссылкам? Я ведь хочу изменить только ссылку «Подробнее». NMitra Только «Подробнее» Mishechka Свои вопросы в комментариях 26 и 35 я решил одним ударом:

Стили для ссылки «Подробнее»:

В разделе Content (общий вид) добавляем код:

.jump-link <
font: normal bold 11px/15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
>

Не уверен, что это правильно, работает. Юрий Помогите, пожалуйста, разобраться с казалось бы простой ситуацией. Между тегами body прописал посредством div два блока. Они представляют собой обычные квадраты, один из которых вложен в другой. В стилях для каждого из них задано минимальное количество свойств (для чистоты эксперимента): высота, ширина и background. У блока-родителя width: 800px; height: 800px, а у дочернего блока width: 600px; height: 600px. Задача — отцентрировать при помощи свойства margin дочерний блок внутри родительского (свойство прописывается в стилях для ДОЧЕРНЕГО блока). В итоге margin(по 100px со всех сторон) срабатывает только слева и справа. Верхняя граница дочернего блока остается прилипшей к родительскому. Не могу понять причины. Конечно, если прописать родительскому блоку padding или дочернему — float, то все работает отлично. Но в данном случае элементы с float и position здесь абсолютно не нужны. Возможна ли в такой ситуации центровка только посредством прописывния margin для дочернего блока? NMitra У вас схлопывается margin. Выберите наиболее подходящий вариант выше, например такой

div div <
display: inline-block;
>

Илон Маск рекомендует:  Можно ли как то уменьшить мерцание при перерисовке компонента
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL