margin в CSS


Содержание

CSS: margin. Внешний отступ.

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

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

Давайте рассмотрим пример. Вот его CSS-код:

Вот как он работает:

Теперь давайте рассмотрим, как он работает.

Класс .div-example-1 создаёт контейнер, внутри которого мы будем играть с абзацем с классом .p-example-1 , устанавливая ему разные значения. У класса .div-example-1 есть CSS правило margin: 0 auto; . Мы видим два значения: 0 и auto. Первое значение устанавливает величину отступа для верхней и нижней грани, второе значение устанавливает размер отступа по бокам. Первое значение равно 0 и оно указывает, что верхнего и нижнего отступа нет, ноль он и есть ноль. Значение auto автоматически центрирует блок, делая правый и левый отступ одинаковыми.

Класс .p-example-1 создан в форме красного квадрата при помощи правил ширина: width: 50px и высота: height: 50px , размер стороны квадрата 50 пикселей.

Мы видим расстояние между красным квадратом и чёрной границей внешнего блока по 10 пикселей везде, кроме правой стороны. Это и есть внешней отступ, заданный в правиле margin: 10px; класса .p-example-1 .

Давайте изменим ширину красного блока на 100%.

Вот как работает этот код:

Мы видим, что красный блок вышел за границу блока-родителя в правой стороне. Почему так произошло? Дело в том, что когда мы установили ширину красного блока равную 100%, то он занял весь родительский блок. После этого к этим 100% мы добавили ещё 10 пикселей отступа. В результате красный блок смещается, так как его суммарная ширина превышает ширину родителя. Подробнее про это можно прочитать в статье: Блочная модель CSS.

Давайте попробуем решить эту проблему. Для этого достаточно просто удалить свойство width: 100%; в классе .p-example-3 :

Всё работает нормально. Браузер по умолчанию растянет блок на всю ширину блока-родителя. И эта ширина не является аналогом правила width: 100%; . Это нужно понимать.

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

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

Давайте приведём пример такого CSS правила:

Обратите внимание, для класса .div-example-4 прописано правило display: inline-block; , то есть я сдела его строчно-блочным элементом. Я это сделал, чтобы его чёрная граница по ширине была равной его содержимому. А содержит он в себе только абзац с классом .p-example-4 . У этого абзаца есть свойство margin: 10px 20px 30px 70px; , и в работе примера видно, что все внешние отступы у блока разные.

Также обратите внимание, что фоновый цвет, указанный в правиле background-color: #F00; , не распространяется на внешний отступ CSS margin. Внешние отсупы всегда прозрачные и эти поля приобретают цвет блока родителя.

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

Давайте подведём итоги, представим в форме таблицы все варианты значений свойства CSS margin:

Табл. CSS margin: количество значений

Число значений Результат
1 Значение используется для установки всех отступов элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от боковых.
3 Первое значение задает отступ от верхнего края, второе — для боковых краёв, а третье — от нижнего края.
4 Устанавливается отступ для каждого края отдельно по часовой стрелке начиная с верхнего.

Также нужно помнить про возможность использования конструкции margin: 0 auto для выравнивания блока по центру.

Ну и нужно помнить, что область внешних отступов не заливается фоновым цветом (свойство background-color).

Значения для свойства CSS margin можно задавать не только в различных диницах измерения CSS, но и в процентах.

Установка внешних отступов CSS margin для каждой стороны

Кроме вышеописанного свойства CSS margin, для задания величины каждого отступа существуют ещё четыре свойства:

  • margin-top — устанавливает границу для верхнего отступа;
  • margin-right — устанавливает границу для правого отступа;
  • margin-bottom — устанавливает границу для нижнего отступа;
  • margin-left — устанавливает границу для левого отступа.

Возникает закономерный вопрос: зачем нужны эти свойства, если есть свойство CSS margin? Бывают случаи, когда без них никак. Например, мы работаем в панели администрирования чужого сайта, у нас нет доступа к редактированию файла CSS, а нам нужно увеличить только верхний отступ тега h2, а остальные не править. Мы добавляем этому тегу атрибут style=»margin-top: 20px» . Так мы меняем только верхний отступ, остальные остаются без изменений, чего нельзя сделать при помощи style=»margin: 20px» .

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

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 .

Илон Маск рекомендует:  Что такое код escapecommfunction

В другой спецификации 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 и padding

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

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

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

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

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

Отступы:

Поля:


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

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

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

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

2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:

1 значение: задаются одинаковые отступы для всех сторон элемента:

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

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

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

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

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

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

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

Отступ (свойства 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 файла

Илон Маск рекомендует:  Внешняя рамка элемента. Свойство outline

.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;
>

margin

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

IE Opera Chrome Firefox Safari
+ + + + +

Пример

Задаем отступ с 4-х сторон для элемента p:

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

Свойство margin задает все свойства отступов в одной строке. Это свойство может иметь от одного до четырех значений.

Примеры:

* margin:10px 5px 15px 20px; — верхний отступ 10px — правый отступ 5px — нижний отступ 15px — левый отступ 20px

* margin:10px 5px 15px; — верхний отступ 10px — правый и левый отступы 5px — нижний отступ 15px

* margin:10px 5px; — верхний и нижний отступы 10px — правый и левый отступы 5px

* margin:10px; — все четыре отступа 10px

Свойство CSS margin: внешние отступы элементов

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

Синтаксис свойства

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

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

В CSS margin может быть отрицательным.

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

  • Один: для всех сторон сразу.
  • Два: для верха и низа и отдельно для боковых сторон.
  • Три: для верха, боков и низа.
  • Четыре: перечисление сторон по часовой стрелке, начиная с верхней.

Алгоритмы вычисления отступов

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

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

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

Схлопывание маргинов

На картинке представлены два расположенных друг под другом элемента с установленными внешними отступами. В первом варианте нижний и верхний маргины блоков объединяются, во втором — складываются. Какой тип поведения кажется более логичным?

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


Вынос маргина за пределы родителя

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

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

Если родитель имеет рамку, паддинг или свойство overflow, равное hidden или scroll, вынос маргина не происходит.

Выравнивание по центру

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

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

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

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

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

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

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

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

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

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

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

CSS свойство margin

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

  • margin: 10px 5px 15px 20px;
    • верхний отступ 10px
    • правый отступ 5px
    • нижний отступ 15px
    • левый отступ 20px
  • margin: 10px 5px 15px;
    • верхний отступ 10px
    • правый и левый отступы 5px
    • нижний отступ 15px
  • margin: 10px 5px;
    • верхний и нижний отступы 10px
    • правый и левый отступы 5px
  • margin: 10px;
    • все четыре отступа 10px

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

CSS синтаксис

Возможные значения

Значение Описание
auto Браузер автоматически устанавливает размер отступов.
размер Устанавливает размер отступов в единицах CSS — пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0.
% Устанавливает размер отступов в процентах от ширины родительского элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем размер отступов параграфа со всех четырех сторон

Схлопывание отступов

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

Рассмотрим следующий пример:


Исходя из данного примера размер нижнего отступа элемента

установлен в 30px, а размер верхнего отступа элемента

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

должен быть 50px (30px + 20px). Однако из-за эффекта схлопывания в дейстительности это значение будет 30px.

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

Схлопывание не срабатывает:

  • для элементов, у которых на стороне схлопывания задано свойство padding.
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
  • на плавающих элементах (для них свойство float задано как left или right);
  • для строчных элементов;
  • для элемента .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

margin

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

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

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#propdef-margin

Описание

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

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

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

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

Синтаксис

margin: значение | auto

Аргументы

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

Табл. 1. Зависимость от числа аргументов

Число аргументов Результат
1 Отступы будут установлены для всех сторон элемента.
2 Первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент — от левого и правого.
3 Первый аргумент задает отступ от верхнего края, второй — одновременно от левого и правого края, а третий — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

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

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

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