CSS marginauto — Как это работает


Оглавление (нажмите, чтобы открыть):

CSS: позиция: абсолютная вместе с margin: auto для центрирования — как это работает?

Я видел эту схему для центрирования элемента на веб-сайте в коде кого-то еще:

Он работает нормально. Без сомнений !

Но я не могу представить, что на самом деле делает CSS-код.

Я видел аналогичный код, в котором позиционирование использовалось для расширения дочернего элемента до его размера.

Но здесь это не имеет смысла.

Может ли кто-нибудь объяснить мне, как работает эта первая показанная техника?

Что делает единственные свойства и как это достигается в конечном итоге?

Буду премного благодарен.

Это потому, что изображение имеет ширину и высоту по умолчанию.

Когда вы используете

Элемент получит размер окна и поместит элемент внутри него.

Итак, если вы поместите позицию относительно #wrap, позиция absolute #child будет корректироваться к родительскому.

Надеюсь, поможет! Ура!

position: absolute позволяет вам установить расстояние от вашего элемента сверху, снизу, справа и слева от краев всей страницы.

Во втором примере вы даже подумали, что #wrap установлен на высоту 800 пикселей, а расстояние #child от каждой стороны страницы равно 0. Поэтому он охватывает всю страницу!

Центрирование горизонтальное и вертикальное

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

margin: auto

Блок по горизонтали центрируется margin: auto :

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

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

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

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

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

В таблицах свойство vertical-align указывает расположение содержимого ячейки.

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:


Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

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

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

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

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

    Убрать лишний пробел между div и началом inner , будет

Центрирование с использованием модели flexbox

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

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

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Высота обоих элементов неизвестна.

  1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
  1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
  2. Решение с использованием flexbox.

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

margin

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

12.0+ 6.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют «внешний отступ» или «поле») от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.

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

Визуальный эффект будет зависеть от количества заданных значений:

  • margin:10px 5px 15px 20px;
    • Верхнее поле — 10px
    • Правое поле — 5px
    • Нижнее поле — 15px
    • Левое поле — 20px

  • margin:10px 5px 15px;
    • Верхнее поле — 10px
    • Правое и левое поле — 5px
    • Нижнее поле — 15px

  • margin:10px 5px;
    • Верхнее и нижнее поле — 10px
    • Правое и левое поле — 5px

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

      Объединение вертикальных полей

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

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

      Примечание: допускаются отрицательные значения полей.

      Почему работает margin 0 auto. 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 » был подготовлен дружной командой проекта .

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

      Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

      Горизонтальная центровка с помощью text-align

      Порой, самое простое решения является самым лучшим:

      Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

      Центровка с помощью margin: auto

      Ещё одно решения для горизонтальной центровки:

      Заметьте что для этого способа нужно выставить свойство display: block.

      Центровка с помощью table-cell

      Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

      Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

      Абсолютная центровка

      Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:

      Центрируем с помощью translate

      Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

      Есть несколько минусов:

      • Свойство CSS transform требует использование браузерных префиксов
      • Не работает в старых версиях IE (8 и ниже)
      • Внешнему контейнеру нужно задавать высоту.
      • Если внутри контейнера есть текст, то он может быть немного размыт.

      Центровка с помощью вида отображения flex

      Наверное самый простой вариант.

      Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

      Центровка с помощью calc

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

      Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

      Top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

      На практике вы можете обнаружить, что данный метод работает отлично, если нам известны размеры элементов:

      Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

      Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

      Использование 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 » был подготовлен дружной командой проекта .

      Internet Explorer — это проблема, которая портит жизнь большинства веб-разработчиков. Более 60% времени разработки может уходить на решение этих специфичных проблем, что не является эффективным использованием времени. В этой статье я расскажу о самых популярных багах и несоответствиях при позиционировании, а также о том, как наиболее просто можно решить эти проблемы.

      1. Позиционирование по центру.

      Каждый веб-разработчик, при вёрстке сайта, сталкивался с необходимостью выровнять элемент по центру. Самый простой и популярный способ — это написать margin: auto; . Это способ позволяет центрировать элемент независимо от разрешения экрана. Однко в IE6 этот способ не работает.

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

      Однако Internet Explorer покажет вам следующее:

      Это происходит потому что IE6 не распознаёт значение auto установленное свойству margin . К счастью, это легко пофиксить.

      Исправляем.

      Простейший и испытанный способ центрировать элемент в IE6 — это написать text-alignL center для родительского элемента и применить tex-align: left для него самого, чтобы его содержимое было выровнено корерктно.

      2. Эффект ступенек

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

      Однако IE нам покажет:

      Не очень дружелюбная навигация, не правда ли? Однако есть 2 способа пофиксить это неприятное поведение.

      1-ый способ

      Простейший способ — это установить свойство float не ссылкам, а элементам списка li .

      2-ой способ

      Второй способ — это применить свойство display: inline для элемента li . Дополнительно мы фиксим баг с двойным внешним отступом, который описан ниже.

      3. Двойной отступ для элементов с установленным свойством float

      Воспроизвети эту ошибку очень просто. Устанавливаем элементу float: left а затем внешний отступ. В результате получаем отступ в два раза больше указанного.

      Однако в IE6 мы увидем следующее:

      Исправляем

      Исправляется это таким же образом как и проблема с эффектом ступенек. То есть устанавливаем свойство display: inline для элемента. Наш код изменится так:

      4. Элементы с маленькой высотой.

      Иногда необходимо создать элементы с маленькой высотой, например чтобы использовать их как элемент дизайна. Первый пришедший в голову способ — это установить высоту. Однако IE покажет вам совсем не то, что вы ожидаете.

      В результате мы получаем элемент с высотой 2px и с границей в 1px.

      Исправляем.

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

      Второй подход

      Ещё один хороший способ — это использовать свойство overflow , необходимо применить значение hidden . И тогда элемент будет необходимой высоты.

      5. Overflow и относительное позиционирование элементов.

      Этот баг проявляется в случае когда родительскому элементу установлено свойство overflow: auto , а дочерний позиционирован относительно него, то есть ему установлено свойство position: relative . При этом получается что дочерний элемент находится как бы поверх родительского. Давайте рассмотрим на примере:

      Исправляем.

      Простейший способ решить проблему — установить родительскому элементу относительное позиционирование.

      6. Box Model

      Internet Explorer неверно интерпретирует модель внешних и внутренних отступов — box model.

      К примеру есть 2 элемента div . Один с исправленной ошибкой, а второй — нет. Между ними будет разница в размерах, равная сумме внутренних отступов.

      Исправляем

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

      Смысл в том, что для IE5/6 высоту и ширину надо устанавливать отдельно. Я например делаю это так:

      Для всех браузеров

      Для IE надо делать так:

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

      7. Установка минимальных размеров.

      Минимальные ширина и высота просто незаменимы когда делаешь красивый дизайн. К сожалению, IE игнорирует свойства min-height и min-width .

      Исправляем

      Для решения проблемы воспользуемся идентификатором!important .

      Второй вариант.

      Если мы примем во внимание тот факт, что IE не понимает вложенные селекторы, то можно сделать так:

      8. Неверное поведение в модели float.


      Одна из самых главных концепций в бестабличной вёрстке используя CSS — это float . В большинстве случаев IE6 обрабатывает это корректно, но иногда бывают проблемы. Например когда контент неразрывный или ширина элемента больше, чем ширина родительского. В этих случаях разметка ломается. Давайте посмотрим пример.

      Как видите, первый div расширился по ширине контента и вытолкнул соседний на следующую строку.

      Исправляем

      Красивого решения нет. Но можно, например, применить свойство overflow: hidden , но тогда контент отсечётся и часть его не будет видно.

      9. Лишнее пространство между элементами списка.

      IE 6 добавляет лишние отступы в вертикальных списках. Рассмотрим пример.

      Как это должно выглядеть:

      Что показывает IE:

      1-ый способ

      Самый простой способ — это указать ширину или высоту для ссылки.

      2-ой способ

      Следующий способ — это установить float: left , а затем очисить его.

      3-ий способ

      Третий способ — это установить display: inline для элемента li . Что, кстати исправит ошибку с двойным внешним отступом, описанную выше.

      Описание

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

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

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

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

      Синтаксис

      margin: [значение | проценты | auto] <1,4>| inherit

      Значения

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

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

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

      Значение и возможности Margin в CSS

      Magrin в CSS регулирует внешние отступы элементов. Элементы в html — это прямоугольники. Они имеют границы, поля и отступы.

      Область полей (margin) — пространство за пределами границ элемента. Свойство используется для задавания расстояния между элементами и позиционирования их на странице.

      Отступы

      Свойство Margin в CSS может иметь значение в %, px, vh/vw, em и rem. Значение Margin может наследоваться от родительского элемента (inherit) или автоматически рассчитываться браузером (auto). Значения для Margin в CSS можно прописать множеством способов (приведены примеры в em — масштабируемых единицах, зависящих от размера шрифта элемента).

      Способы задания значения отступам:

      • для каждой из сторон (top, right, bottom, left) элемента (например, указано значение верхнего внешнего отступа от края элемента center);

      .center < margin-top: 1em; >

      • для противоположных сторон (сначала указывается значение для top и bottom, потом для left и right);

      .center < margin: 1em, 0.5em; >

      • для трех сторон (первым указывается значение для margin-top, вторым — для left и right, третьим — для bottom);

      .center < margin: 0em 1.1em 2em; >

      • для каждой стороны можно указать значения поочередно (margin-top, margin-right и т. д.) или в одну строку от top до left по часовой стрелке;

      .center < margin: 0.5em 1em 1.5em 2em; >

      • значение элемента margin может быть одинаково для каждой стороны;

      .center < margin: 1em; >

      • значение для margin может быть не задано;
      • значение margin может быть отрицательным, например, в CSS margin-top с отрицательным значением перемещает элемент вверх;

      .center < margin-top: -1em; >

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

      Отрицательный отступ

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

      С помощью отрицательных margin-left и margin-top можно «сдвинуть» элемент влево или вверх. Если на месте, куда перемещается элемент, уже есть объекты, тогда он их перекрывает.

      Margin-bottom и margin-right не влияют на положение элемента, к которому применяются, но для других объектов он становится меньше. Благодаря этому на картинке блок с именем автора цитаты «залез» на блок с цитатой.

      Auto и inherit

      Использование auto в CSS у margin и text-align со значением center оказывают схожее действие. Auto центрирует элемент по горизонтали на равном расстоянии от границ контейнера.

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

      Использование значения inherit подразумевает наследование значения от элемента-родителя. Допустим, родительскому элементу прописано значение в CSS margin-left, у элемента center стоит значение, указанное в предыдущем примере.

      Родительский элемент, в который вложены все остальные элементы, сместился чуть ниже относительно своего старого положения. Если изменить у элемента center значение margin на наследуемое, то в результате центрирование исчезнет, а объект, который наследует свойство, таким же образом сместится вниз.

      Использование в CSS Margin у body может привести к схлопыванию отступов. Обычно у body обнуляют значение margin, при необходимости отступов от элементов используют padding.


      Соседние элементы

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

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

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

      Вложенные элементы

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

      На картинке приведены примеры поведения элементов и тогда, когда значения margin у родительского и дочернего элементов различны. Как видно, если у дочернего указано значение margin-top больше, чем у родительского, то родительский смещается именно на значение, указанное у дочернего элемента.

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

      Пустые элементы

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

      Исключения и правила

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

      Проблем схлопывания между родительскими и дочерними элементами удается избежать только через вставку чего-либо между ними, например добавляя границу дочернему элементу. Для того чтобы схлопывания не происходило между соседними объектами, margin лучше прописывать в одном направлении.

      Несколько общих правил использования margin:

      • лучше прописывать отступы в одном направлении для всех элементов (вправо и вниз);
      • формирование расстояния между элементами не должно происходить за счет дочерних элементов;
      • отступ дочернего элемента внутри родительского от границ родительского прописывают с помощью padding родительского, а не margin дочернего.

      Margin в CSS — одно из свойств элемента, позволяющее управлять его расположением на странице по отношению к другим объектам. У свойства есть четыре вариации, позволяющие изменять положение элемента по горизонтали и вертикали. Одной из проблем использования margin является схлопывание отступов (объединение двух отступов в один).

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

      Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS .

      Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

      Absolute-Center < margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; >
      Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle , где приводится отличное решение для вертикального центрирования. Вот еще несколько на эту тему.

      Рассмотрим способ поближе.

      Достоинства

      • Кроссбраузерность (включая IE 8-10)
      • Никакой дополнительной разметки, минимум стилей
      • Адаптивность
      • Независимость от padding (без box-sizing !)
      • Работает для изображений

      Недостатки

      • Должна быть задана высота (см. Variable Height)
      • Рекомендуется задать overflow: auto , чтобы контент не расползался
      • Не работает на Windows Phone

      Совместимость с браузерами

      Внутри контейнера

      С использованием viewport

      Адаптивность

      Смещения

      Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.

      Много контента

      Изображения

      Изменяемая высота

      Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).

      • Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
      • IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
      • Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование

      .Absolute-Center.is-Variable

      Другие способы

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

      • Кроссбраузерность
      • Минимальный код

      Недостатки:

      • Не адаптивный
      • Ползет верстка, если в контейнере слишком много контента
      • Приходится компенсировать отступы или использовать box-sizing: border-box

      Использование transform

      • Изменяемая высота
      • Минимальный код

      Недостатки:

      • Не работает в IE 8
      • Использование префиксов
      • Может мешать работе других эффектов с transform
      • В некоторых случаях при рендеринге размываются края блока и текст

      Table-cell


      • Изменяемая высота
      • Верстка не едет при большом количестве текста в блоке
      • Кроссбраузерность

      Недостатки:

      • Сложная структура

      Flexbox

      • Контаент может быть любой высоты или ширины
      • Может использоваться в более сложных случаях

      Недостатки:

      • Нет поддержки IE 8-9
      • Требуется контейнер или стили в body
      • Требует множество разнообразных префиксов для корректной работы в современных браузерах
      • Возможные проблемы производительности

      Internet Explorer — это проблема, которая портит жизнь большинства веб-разработчиков. Более 60% времени разработки может уходить на решение этих специфичных проблем, что не является эффективным использованием времени. В этой статье я расскажу о самых популярных багах и несоответствиях при позиционировании, а также о том, как наиболее просто можно решить эти проблемы.

      1. Позиционирование по центру.

      Каждый веб-разработчик, при вёрстке сайта, сталкивался с необходимостью выровнять элемент по центру. Самый простой и популярный способ — это написать margin: auto; . Это способ позволяет центрировать элемент независимо от разрешения экрана. Однко в IE6 этот способ не работает.

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

      Однако Internet Explorer покажет вам следующее:

      Это происходит потому что IE6 не распознаёт значение auto установленное свойству margin . К счастью, это легко пофиксить.

      Исправляем.

      Простейший и испытанный способ центрировать элемент в IE6 — это написать text-alignL center для родительского элемента и применить tex-align: left для него самого, чтобы его содержимое было выровнено корерктно.

      2. Эффект ступенек

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

      Однако IE нам покажет:

      Не очень дружелюбная навигация, не правда ли? Однако есть 2 способа пофиксить это неприятное поведение.

      1-ый способ

      Простейший способ — это установить свойство float не ссылкам, а элементам списка li .

      2-ой способ

      Второй способ — это применить свойство display: inline для элемента li . Дополнительно мы фиксим баг с двойным внешним отступом, который описан ниже.

      3. Двойной отступ для элементов с установленным свойством float

      Воспроизвети эту ошибку очень просто. Устанавливаем элементу float: left а затем внешний отступ. В результате получаем отступ в два раза больше указанного.

      Однако в IE6 мы увидем следующее:

      Исправляем

      Исправляется это таким же образом как и проблема с эффектом ступенек. То есть устанавливаем свойство display: inline для элемента. Наш код изменится так:

      4. Элементы с маленькой высотой.

      Иногда необходимо создать элементы с маленькой высотой, например чтобы использовать их как элемент дизайна. Первый пришедший в голову способ — это установить высоту. Однако IE покажет вам совсем не то, что вы ожидаете.

      В результате мы получаем элемент с высотой 2px и с границей в 1px.

      Исправляем.

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

      Второй подход

      Ещё один хороший способ — это использовать свойство overflow , необходимо применить значение hidden . И тогда элемент будет необходимой высоты.

      5. Overflow и относительное позиционирование элементов.

      Этот баг проявляется в случае когда родительскому элементу установлено свойство overflow: auto , а дочерний позиционирован относительно него, то есть ему установлено свойство position: relative . При этом получается что дочерний элемент находится как бы поверх родительского. Давайте рассмотрим на примере:

      Исправляем.

      Простейший способ решить проблему — установить родительскому элементу относительное позиционирование.

      6. Box Model

      Internet Explorer неверно интерпретирует модель внешних и внутренних отступов — box model.

      К примеру есть 2 элемента div . Один с исправленной ошибкой, а второй — нет. Между ними будет разница в размерах, равная сумме внутренних отступов.

      Исправляем

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

      Смысл в том, что для IE5/6 высоту и ширину надо устанавливать отдельно. Я например делаю это так:

      Для всех браузеров

      Для IE надо делать так:

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

      7. Установка минимальных размеров.

      Минимальные ширина и высота просто незаменимы когда делаешь красивый дизайн. К сожалению, IE игнорирует свойства min-height и min-width .

      Исправляем

      Для решения проблемы воспользуемся идентификатором!important .

      Второй вариант.

      Если мы примем во внимание тот факт, что IE не понимает вложенные селекторы, то можно сделать так:

      8. Неверное поведение в модели float.

      Одна из самых главных концепций в бестабличной вёрстке используя CSS — это float . В большинстве случаев IE6 обрабатывает это корректно, но иногда бывают проблемы. Например когда контент неразрывный или ширина элемента больше, чем ширина родительского. В этих случаях разметка ломается. Давайте посмотрим пример.

      Как видите, первый div расширился по ширине контента и вытолкнул соседний на следующую строку.


      Исправляем

      Красивого решения нет. Но можно, например, применить свойство overflow: hidden , но тогда контент отсечётся и часть его не будет видно.

      9. Лишнее пространство между элементами списка.

      IE 6 добавляет лишние отступы в вертикальных списках. Рассмотрим пример.

      Как это должно выглядеть:

      Что показывает IE:

      1-ый способ

      Самый простой способ — это указать ширину или высоту для ссылки.

      2-ой способ

      Следующий способ — это установить float: left , а затем очисить его.

      3-ий способ

      Третий способ — это установить display: inline для элемента li . Что, кстати исправит ошибку с двойным внешним отступом, описанную выше.

      Использование 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 » был подготовлен дружной командой проекта .

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

      Центровка элементов по горизонтали не так уж и сложна, по вертикали уже вызывает вопросы, ну а комбинирование вообще может поставить в тупик. В эру адаптивного дизайна, нам редко точно ясны размеры тех или иных элементов. Я насчитал 6 различных способов центровки элементов с помощью CSS. Начнём с простых примеров, закончим более сложными. Работать будет с одним и тем же HTML кодом:

      Горизонтальная центровка с помощью text-align

      Порой, самое простое решения является самым лучшим:

      Тут нет вертикальной центровки: для этого вам нужно будет к div-у добавить свойство margin-top и margin-bottom.

      Центровка с помощью margin: auto

      Ещё одно решения для горизонтальной центровки:

      Заметьте что для этого способа нужно выставить свойство display: block.

      Центровка с помощью table-cell

      Используя display: table-cell, мы можем обеспечить центровку элемента как по вертикали, так и по горизонтали. Но тут нам понадобится вложить изображение ещё в один элемент div.

      Чтобы всё работало корректно, div-у нужно выставить width: 100%. Для центровки элемента по вертикали, воспользуемся стандартными приёмами, выставив высоту. Работает везде, включая IE8+.

      Абсолютная центровка

      Очень интересное решение. Заключается в том, что необходимо задать высоту внешнему контейнеру:

      Центрируем с помощью translate


      Новое решение, где используются CSS трансформации. Обеспечивает как горизонтальную центровку, так и вертикальную:

      Есть несколько минусов:

      • Свойство CSS transform требует использование браузерных префиксов
      • Не работает в старых версиях IE (8 и ниже)
      • Внешнему контейнеру нужно задавать высоту.
      • Если внутри контейнера есть текст, то он может быть немного размыт.

      Центровка с помощью вида отображения flex

      Наверное самый простой вариант.

      Работает не во всех версиях IE (хотя можно подстраховать себя, используя вдобавок display: table-cell). Полный CSS:

      Центровка с помощью calc

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

      Всё очень просто, мы можем высчитать нужные нам размеры в зависимости от всего макета страницы. Вычисления очень просты, 50% это центральная точка контейнера, но наша задача разместить по этим координатам левый верхний угол изображения. Далее отнять по половине высоты и ширины изображения. Формула следующая:

      Top: calc(50% — (40% / 2)); left: calc(50% — (40% / 2));

      На практике вы можете обнаружить, что данный метод работает отлично, если нам известны размеры элементов:

      Данный метод поддерживается Firefox-ом, начиная с 4 версии, вам нужно будет прописать браузерные префиксы. В IE 8 не работает. Полный код:

      Надеюсь, данных методов хватит, чтобы вы нашли для себя лучшее решение.

      Использование 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 Flexbox

      Работа с отступами в CSS Flexbox это отдельная песня, которая требует пристального внимания и разъяснения. В этом статье собраны и доработаны переводы двух статей.

      Перевод двух статей:

      Причудливая магия flexbox и автоматических отступов

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

      И одна из таких тем, это то, как взаимодействуют flexbox и margin .

      Возьмём этот пример:

      Что он делает? Кажется я припоминаю, что есть несколько модных штук, которые вы можете провернуть с его помощью и на этой неделе я уже подзабыл про них, после прочтения отличного старенького поста от Sam Provenza о том как auto-margin’ы и flexbox работают вместе. Но я еще не совсем понимал концепцию этого всего дела, даже после прочтения поста и не понял бы, если бы не начал сам делать демки.

      В этом посте, Sam описывает то, как margin:auto влияет на flex-элементы, таким образом:

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

      Давайте разберем этот момент и представим, что у нас есть родительский div с div ’ом потомком внутри:


      И предположим, что мы используем следующий CSS для стилизации этих div ’ов:

      Результат будет примерно таким:

      Когда мы добавляем margin-left: auto для .child элемента, как тут:

      То увидим мы вот такое:

      Странно, да? Левый margin отталкивает от родителя таким образом, что потомок оказывается в дальнем правом углу. Но всё становится ещё страннее, когда мы выставляем всем внешним отступам значение auto :

      Это как если бы мы применили знаменитый трюк с центрированием, выставив justify-content и align-items на center , потому потомок решает остаться в центре родителя, как горизонтально, так и вертикально. Похожим образом, если мы выставим margin-left и margin-top на auto , мы можем спихнуть flex-элемент в нижний правый угол родителя:

      Когда Sam говорит, “ этот элемент будет автоматически отодвинут по указанному внешнему отступу, чтобы занять свободное место в flex-контейнере”, то в моей пустой комнате это интерпретируется как-то примерно так:

      Выставление свойства margin flex-потомку, оттолкнет его в указанном направлении. Выставив margin-left на auto, вы оттолкнете потомка вправо. Выставив margin-top на auto, вы оттолкнете потомка вниз.

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

      Почему это полезно знать? Я думаю, что есть несколько моментов, когда justify-self или align-self могут быть немного ни тем, что вам нужно, в то время как использование автоматических внешних отступов даёт вам дополнительную гибкость для работы с элементами страницы. Я видел много демок, включая те, которые делала Sam для своего поста и все они в основном использовались для расстановки элементов в меню навигации. В общем, отталкивание одного элемента в меню на самый низ или далеко вправо flex-родителя это определенно полезнейшая штука в подобных сценариях.

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

      Абсолютное центрирование по горизонтали и вертикали в CSS

      Дата публикации: 2013-11-28

      От автора: Все мы встречали margin: 0 auto; для выполнения горизонтального центрирования, но margin: auto; отказывался работать для вертикального… до сих пор! На самом деле абсолютное центрирование требует всего лишь объявленной высоты и этих стилей:

      Я – не первопроходец этого метода (хотя и осмелился назвать его Absolute Centering), и, может быть, это обычная техника, однако большая часть статей о вертикальном центрировании никогда о нем не упоминают и я нигде не видел его до тех пор, пока не порылся в разделе комментариев одной статьи.

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

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

      В ней Саймон (Simon) связал с ним jsFiddle, чем отмел все прочие способы (тот же метод упоминался в комментариях Приитом (Priit)). При дальнейших исследованиях мне пришлось применять очень специфические ключевые слова, чтобы отыскать несколько других источников этого метода. Никогда до того не пользовавшийся данной техникой, я протестировал ее и обнаружил, насколько абсолютное центрирование потрясающе в самом деле.

      ПРЕИМУЩЕСТВА:

      Кроссбраузерность (включая IE8-10)

      Не требуется специальной разметки, минимум стилей

      Адаптивно работает с процентными соотношениями и min-/max-

      Один класс для центрирования любого контента

      Центрирование вне зависимости от отступа (без box-sizing!)

      Блокам можно легко менять размер

      Отлично работает с изображениями

      ПРЕДУПРЕЖДЕНИЕ:

      Нужно заявлять высоту

      Рекомендуется установка overflow: auto для предотвращения переливания содержимого

      Не работает в Windows Phone

      БРАУЗЕРНАЯ СОВМЕСТИМОСТЬ:

      Chrome, Firefox, Safari, Mobile Safari, IE8-10.

      Метод абсолютного центрирования тестировался и безупречно работает в последних версиях Chrome, Firefox, Safari, Mobile Safari и даже IE8-10.

      Пояснение

      После изучения спецификаций и документации вот как я понимаю принцип работы Absolute Centering:

      В нормальном потоке содержимого margin: auto; равен ’0′ для верха и низа. W3.org: Если ‘margin-top’ или ‘margin-bottom’ установлены на ‘auto’, их используемое значение равно 0.

      position: absolute; выводит блок из обычного потока содержимого, отображая остальной контент так, как будто этого блока тут не было. Developer.mozilla.org: …абсолютно позиционированный элемент вынимается из потока и, таким образом, не занимает пространства

      Установка top: 0; left: 0; bottom: 0; right: 0; задает браузеру новый ограничивающий прямоугольник для блока. На этом этапе блок заполнит все доступное пространство в своем офсетном родительском элементе, который является телом body или контейнером position: relative;. Developer.mozilla.org: Для абсолютно позиционированных элементов свойства top, right, bottom и left определяют офсеты от края содержащего блока элемента (относительно которого позиционирован элемент).

      Назначение блоку width или height препятствует занятию блоком всего доступного пространства и заставляет браузер посчитать margin: auto на основе нового ограничивающего прямоугольника. Developer.mozilla.org: Поле [абсолютно позиционированного] элемента затем располагается внутри этих офсетов.

      Так как блок позиционирован абсолютно и, следовательно, вне нормального потока, браузер назначает подходящие значения margin-top и margin-bottom, центрируя элемент в ранее определенных границах.
      W3.org: Если ни одно из трех [top, bottom, height] не установлено на ‘auto’: если и ‘margin-top’, и ‘margin-bottom’ стоят на ‘auto’, решите уравнение с тем дополнительным ограничивающим условием, что два поля получают равные значения. Иначе говоря: отцентрируйте блок по вертикали

      Похоже, Absolute Centering – это предназначенное применение margin: auto; согласно спецификации и, следовательно, должно работать во всех браузерах, подчиняющихся стандартам.

      TL;DR: Абсолютно позиционированные элементы не отображаются в нормальном потоке, поэтому margin: auto; центрирует по вертикали внутри границ, установленных top: 0; left: 0; bottom: 0; right: 0;.

      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.

      Мастер Йода рекомендует:  В Чикаго напечатали на 3D-принтере мини-сердце из мышечных клеток настоящего сердца
  • Добавить комментарий