Содержание

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

Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).
Это поведение известно как схлопывание внешних отступов (margin collapsing).
Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

Схлопывание внешних отступов происходит в трёх случаях:

Соседние элементы (siblings)
Схлопываются отступы соседних элементов  (за исключением случая, когда к последнему элементу применено свойство clear).
Родительский и первый/последний дочерние элементы
Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения margin-top родительского элемента, от margin-top одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block),
height
, min-height или max-height для отделения отступов margin-bottom родительского блока от margin-bottom отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.
Пустые блоки
Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), height или min-height для отделения margin-top верхнего отступа этого блока от его margin-bottom нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.

На заметку:

  • Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
  • Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
  • При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
  • Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
  • Внешние отступы плавающих и  абсолютно позиционируемых элементов никогда не схлопываются.

HTML

<p>Нижний отступ этого абзаца схлопнулся …</p>
<p>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <code>1.2rem</code>.</p>

<div>Этот родительский элемент содержит два абзаца!
  <p>Этот абзац имеет отступ <code>.4rem</code> между ним и текстом выше.</p>
  <p>Нижний отступ этого абзаца схлопывается с отступом родителя, принимая значение <code>2rem</code>.</p>
</div>

<p>Этот абзац имеет отступ <code>2rem</code> от элемента выше.</p>

CSS

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: .4rem 0 1.2rem 0;
  background: yellow;
}

Результат

Как делать отступы в html div

Модель визуального форматирования

В соответствии со спецификацией CSS, свойства width и height устанавливают размер не контейнера, а области содержимого.

По сути, мы имеем дело с ЧЕТЫРЬМЯ(!) контейнерами, где содержимое является так называемым «ядром» (core content area) и помещается еще в 3 контейнера.

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

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

padding — внутренний отступ | внутренняя полоска | подложка.
Обрамляет содержимое, отделяя его от границ контейнера. Заливается цветом фона вместе с содержимым.

border — рамка. Имеет цвет, толщину и стиль используемых линий. Чаще используются в декоративных целях.

margin — внешний отступ | внешняя полоска | поле.
Прозрачная полоска за пределами рамки. Используется для задания промежутков между элементами страницы.

Добавление padding, border, margin не изменяет размеры области содержимого, но изменяет общий размер контейнера.

Вычисляем ширину контейнера:

Высота вычисляется аналогично и, в нашем случае, равна ширине.

Свойство box-sizing CSS3

Это свойство появилось в спецификации CSS3 и поддерживается всеми современными браузерами. Позволяет включить отступы контейнера в заданную ширину! Может принимать 2 значения:

box-sizing: content-box — все так как было описано выше, width и height включают в себя только область содержимого.

box-sizing: border-box — указанный размер контейнера включает в себя все отступы и рамки.

Свойства padding и border

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

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

Вывод кода Html

Свойство margin

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

Поля первого блока:
верхнее, нижнее — 30px
правое, левое — 20px

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

Второй блок окружен полями — 50px;
Все достаточно просто, визуально разница в отступе от левого края хорошо заметна. Интерес представляет расстояние между блоками .

Логично было бы предположить, что расстояние между блоками, нижнее поле одного из которых равно 30px, а верхнее поле другого 50px, будет равно сумме этих полей, т.е. 80px. Но это не так. Смежные вертикальные полоски сливаются, принимая ширину большей из них. В нашем случае зазор между блоками будет 50px. Это очень полезное правило, позволяющее убирать не нужные вертикальные зазоры между абзацами, например.
По горизонтали поля не сливаются.

Сейчас мы более подробно остановимся на этом очень важном для понимания моменте — слияние смежных полей.

Из вышеприведенного примера видно, что нижнее поле блока div , равное 15px, и верхнее поле блока p — 20px «схлопнулись» и дали результирующее поле размером 20px. При этом горизонтальные поля остались на месте. (в браузере IE6 — нет . )

А теперь, если родительскому блоку div добавить рамку border:1px solid #111 , или внутренний отступ padding:5px , верхнее и нижнее поля вернутся на место!

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

Так же сливаются верхние и нижние вертикальные поля пустого элемента, а если пустых элементов несколько и они расположены друг над другом, то все их вертикальные внешние полоски сольются в одну!

Для свойства margin можно задавать отрицательные значения. Их можно использовать для наслоения элементов друг на друга.

Еще отрицательные значения иногда используют для сокрытия элемента. Задав достаточно большой отрицательный отступ, например -2000px, мы смещаем элемент за пределы страницы, т.е. делаем его невидимым.

Расстановка полей и отступов в CSS

В этой статье я хотел бы рассказать, как правильно расставлять поля ( padding ) и отступы ( margin ) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели ( box model ) поля — это расстояние между контентом ( content ) и границей блока ( border ). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина ( width ) и высота ( height ) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.

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

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

Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .

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

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

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

Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным. Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

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

Но в этом случае при убирании ссылки «Другие новости» внизу остается лишний отступ. То же самое справедливо и для заголовка. Очевидно, что первый вариант является более правильным, поскольку позволяет гибко изменять внешний вид блока.

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

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор :first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора :last-child , который был добавлен только в спецификации CSS версии 3.0.

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное — определить, какие элементы блока являются основными (обязательными), а какие опциональными.

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

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

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

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

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля ( padding ) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .

Теперь заголовок h3 можно расположить как после заголовка h2 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .

Общие правила

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

отступы между div

Отступы между div блоками
Здравствуйте. Делаю простой сайт. Запутался с отступами между блоками. Указываю необходимую.

Отступы между div в зависимости от размера
как сделать чтобы при изменении размера первого дива ( там будет текст) второй див тоже вниз.

Откуда берутся отступы между блоками div
&lt;!DOCTYPE html&gt; &lt;html lang=&quot;ru&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; .

Отступы во вложенных блоках div
Доброго времени суток! Столкнулся с такой проблемой: два блока, один вложен в другой: &lt;!DOCTYPE.

Все, что вам нужно знать о свойстве margin в CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться ×

Перевод статьи «Everything You Need To Know About CSS Margins».

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

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

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

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

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

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

В CSS1 блочная модель была изображена в виде ASCII-диаграммы, как показано на иллюстрации:

Все четыре свойства margin (по одному для каждой стороны) и сокращенный вариант написания (просто margin) были определены еще в CSS1.

В спецификации CSS2.1 есть иллюстрация, показывающая блочную модель и также определяющая термины, которые мы все еще используем для описания различных блоков. В этой спецификации описаны content box,

padding box, border box и margin box. Каждый из этих блоков определяется краями контента, внутреннего оступа, границы и внешнего отступа соответственно.

Сейчас у нас есть спецификация блочной модели в третьей версии. Определения блочной модели (и в частности внешних отступов) в ней такие же, как в CSS2, поэтому в нашей статье мы будем пользоваться последними.

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

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

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

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

Внешние отступы схлопываются в разных ситуациях. Рассмотрим их по очереди, а затем разберемся, как предотвратить схлопывание.

Смежные блоки-сиблинги

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

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

В примере, приведенном ниже, у нас есть три элемента div. У первого есть верхний и нижний margin в 50 px. У второго тоже есть такие отступы, но по 20 px. У третьего есть верхний и нижний margin по 3 em.

See the Pen Smashing: margins, adjacent siblings by rachelandrew (@rachelandrew) on CodePen.

В итоге расстояние между первым и вторым элементом — 50 px, потому что меньший margin в 20 px поглотился большим. А отступ между вторым и третьим элементами — 3 em, потому что 3 em больше, чем 20 px (нижний margin второго элемента).

Полностью пустые блоки

Если блок пустой, его внешние отступы (верхний и нижний) могут схлопнуться друг с другом. В следующем примере элемент с классом empty имеет верхний и нижний margin (по 50 px каждый). Но в итоге расстояние между первым и третьим элементами не 100 px, а 50 px. Так получилось, потому что верхний и нижний отступы схлопнулись. Если в этот пустой блок добавить что-нибудь (хотя бы даже внутренний отступ — padding), схлопывание внешних отступов не произойдет.

See the Pen Smashing: margin collapsing on an empty element by rachelandrew (@rachelandrew) on CodePen.

Родительский элемент и первый или последний потомок

Этот сценарий чаще всего застает людей врасплох, потому что он не то чтобы сильно интуитивен. В следующем примере у нас есть элемент div с классом wrapper. Также ему назначена красная обводка, чтобы его было лучше видно. Все три элемента-потомка имеют margin в 50 px (т. е., внешние отступы со всех сторон). Но в результате мы не получаем отступа от верхней и нижней границы родительского элемента.

See the Pen Smashing Margins: margin on first and last child by rachelandrew (@rachelandrew) on CodePen.

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

Схлопываются только вертикальные отступы

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

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

Что может предотвратить схлопывание внешних отступов

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

Начнем с того, что схлопывание не произойдет, если поместить что-то между рассматриваемыми элементами.

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

See the Pen Smashing: empty boxes with padding do not collapse margins by rachelandrew (@rachelandrew) on CodePen.

За таким поведением стоит определенная логика. Если блок совершенно пуст, не имеет обозначенных границ или внутренних отступов, он попросту невидимый. Это может быть, например, пустой абзац, добавленный в разметку вашей CMS. Если ваша CMS добавляет лишние элементы вроде абзацев, вы, вероятно, не захотите, чтобы из-за этого появлялись огромные промежутки между абзацами (а они появились бы благодаря отступам). Добавьте в пустой блок что угодно — и вы получите эти промежутки.

Аналогичное поведение мы можем наблюдать у отступов первого и последнего потомка, которые схлопываются с родительскими отступами. Если мы добавим границу (border) для родительского элемента, отступы элементов-потомков останутся внутри.

See the Pen Smashing Margins: margin on first and last child doesn’t collapse if the parent has a border by rachelandrew (@rachelandrew) on CodePen.

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

Создание блочного контекста форматирования

Новый блочный контекст форматирования также предотвращает схлопывание внешних отступов. Если мы вернемся к примеру с первым и последним потомком, когда внешние отступы выходили за пределы wrapper, и установим для wrapper свойство display: flow-root, это создаст новый блочный контекст форматирования и в результате отступы останутся внутри обертки.

See the Pen Smashing Margins: a new block formatting context contains margins by rachelandrew (@rachelandrew) on CodePen.

Если хотите узнать больше о свойстве display: flow-root, почитайте статью “Understanding CSS Layout And The Block Formatting Context”. Изменение значения свойства overflow на auto даст тот же эффект. Это тоже создаст новый блочный контекст форматирования, хотя может привести к появлению полос прокрутки, а это порой нежелательно.

Контейнеры Flex и Grid

Flex и Grid-контейнеры устанавливают Flex и Grid-контексты форматирования для своих потомков, а потому их поведение будет отличаться от блочного макета. Одно из отличий — внешние отступы не схлопываются.

Если мы возьмем пример, который обсуждали выше, и превратим wrapper во flex-контейнер с отображением элементов с flex-direction: column, мы увидим, что теперь внешние отступы содержатся внутри обертки. Кроме того, внешние отступы между смежными flex-элементами не схлопываются друг с другом, в результате чего мы получаем расстояние в 100 px между ними (50 px нижнего отступа одного элемента плюс 50 px верхнего отступа другого).

See the Pen Smashing Margins: margins on flex items do not collapse by rachelandrew (@rachelandrew) on CodePen.

Стратегии использования margin на вашем сайте

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

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

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

Идеальным вариантом было бы при необходимости давать компонентам display: flow-root. В качестве запасного варианта для старых браузеров для создания нового блочного контекста форматирования можно использовать overflow, превращать родительский элемент во flex-контейнер или добавлять какой-нибудь пиксель внутреннего отступа. Не забывайте, что вы можете использовать функционал запросов для определения поддержки для display: flow-root — чтобы только старые браузеры получали менее оптимальное решение.

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

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


И в завершение статьи давайте рассмотрим еще пару интересных вещей об отступах.

Указание значения margin в процентах

При использовании процентов в CSS всегда следует помнить о том, проценты от чего имеются в виду. Если вы задаете размеры margin и padding в процентах, это всегда проценты от inline-размера родителя (ширина в horizontal writing mode). Это означает, что при использовании процентов у вас будет одинаковый внутренний отступ со всех сторон элемента.

Рассмотрим пример. У нас есть обертка (wrapper) шириной в 200 px. Внутри — блок с margin: 10%. То есть, внешний отступ будет по 20 px со всех сторон, потому что 20 px это 10% от 200 px.

See the Pen Smashing Margins: percentage margins by rachelandrew (@rachelandrew) on CodePen.

Внешние отступы в «относительнопоточном мире»

В этой статье мы все время говорили о вертикальных отступах. Но в современном CSS появилась тенденция говорить о направлении в относительном ключе, а не в физическом смысле. Говоря о вертикальных отступах, мы на самом деле говорим об отступах в блочном измерении. Они могут быть верхними и нижними — если мы в horizontal writing mode (когда чтение идет слева направо и сверху вниз), но в vertical writing mode отступы становятся левыми и правыми.

Когда мы употребляем логические направления (относительно потока), нам проще говорить про начало и конец блока, а не про верх и низ. Чтобы упростить все это, CSS представил спецификацию логических свойств и значений. Она сопоставляет «относительнопоточные» свойства и физические.

Что касается внешних отступов, у нас есть следующие варианты (если мы работаем с английским языком и прочими языками, где чтение текста идет слева направо):

  • margin-top = margin-block-start
  • margin-right = margin-inline-end
  • margin-bottom = margin-block-end
  • margin-left = margin-inline-start

У нас также есть два новых стандарта, позволяющие устанавливать оба блочных и оба строчных отступа:

  • margin-block
  • margin-inline

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

See the Pen Smashing margins: flow relative margins by rachelandrew (@rachelandrew) on CodePen.

Дополнительно по теме логических свойств и значений можно почитать вот эту статью или MDN.

Итоги

Теперь вы знаете большую часть того, что вообще стоит знать о внешних отступах! Кратко повторим:

  • Схлопывание отступов имеет большое значение. Понимание того, когда схлопывание происходит, а когда — нет, поможет вам решить любые связанные с ним проблемы.
  • Если вы будете задавать внешние отступы только для одного направления, это избавит вас от многих проблем со схлопыванием.
  • Как и во всех прочих случаях, следует делиться с командой теми решениями, которые вы приняли, и оставлять комментарии в коде.
  • Если вы будете думать о направлениях в блочном и строчном измерении, а не в физическом (верх/низ, лево/право), вам будет легче привыкнуть к тому, что веб становится независящим от направления письма.

html отступ сверху div — ComputerMaker.info

Автор admin На чтение 4 мин. Просмотров 123 Опубликовано

Приветствую вас, дорогие посетители, на сайте Impuls-Web!

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

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

Навигация по статье:

Внешний отступ сверху CSS

Для задания внешнего верхнего отступа используется CSS-свойство margin-top, значение которого можно задать в px (пикселях), em, % и других доступных в CSS единицах измерения.

Аналогично, для выравнивания блока вы можете использовать свойства margin-left, margin-right, margin-bottom. Так же можно указать свойство margin, и задать для него четыре параметра, по часовой стрелке начиная с верхней стороны, соответственно для каждой из сторон:

Внутренний отступ сверху CSS

В ситуации, когда нам нужно выровнять контент по вертикали, относительно родительского блока мы можем использовать свойство padding-top, которое задает внутренний отступ сверху CSS. Параметры свойства задаются аналогично свойству margin в px, em, % и т.д.

Аналогично свойству margin, свойство padding можно использовать для задания отступов с других сторон блока по отдельности: padding-left, padding-right, padding-bottom. А так же можно задавать расстояния для всех сторон одновременно:

В этом случае значения задаются аналогично как и для margin начиная сверху, а дальше по часовой стрелке (справа, снизу, слева)

Используя, в зависимости от ситуации, показанные в статье способы задания отступов сверху CSS-свойствами margin и padding, вы сможете расположить необходимые вам блоки на странице своего сайта именно так как вам нужно.

Надеюсь, данная статья будет для вас полезна! Не забывайте оставлять комментарии и делиться статьей в соцсетях.
А на сегодня у меня все! Успехов вам и до встречи в следующих статьях!

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

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

Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

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

Синтаксис

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

Значения

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

[window.]document.getElementBy >elementID «).style.marginTop

Браузеры

Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

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

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

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

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

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

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

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

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

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

Хотите писать JavaScript, используя современный синтаксис ES2017? Уметь тестировать свои программы? Записывайтесь на профессиональный курс по JavaScript второго уровня, проходящий c 18 ноября 2019 по 22 января 2020. Цена 23 900

Когда использовать CSS и отступы в CSS [закрыто]

TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.

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

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

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

Таким образом, содержание двух элементов в конечном итоге будет 2emразделено.

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

Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1emобъединенное поле, за которым следует содержимое второго элемента. Таким образом, содержание этих двух элементов только 1emотдельно.

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

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

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h4>Default</h4>
<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h4>padding-top: 20px</h4>
<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h4>margin-top: 20px; </h4>
<div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

CSS: схлопывание внешних отступов: ilyachalov — LiveJournal

Это явление по-английски называется «margin collapsing». Вот ссылка на статью (перевод на русский язык), в которой рассказывается о том, что это такое, а также о причинах этого явления:

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

По-английски (в оригинале) эта статья называется «Mastering margin collapsing», что на русский язык можно перевести как «Понимание причин схлопывания внешних отступов».

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

В данном посте я не собираюсь рассматривать все случаи, в которых может произойти данное явление. Я рассмотрю один конкретный случай и несколько способов избавиться от схлопывания внешних отступов в рассматриваемом случае. Я пользуюсь браузером «Microsoft Edge» на движке «Chromium».

* * *
Итак, сначала разберемся, что подразумевается под «схлопыванием внешних отступов». Возьмем конкретный случай, тело тестовой HTML-страницы представляет следующий код:
<body>
  <div></div>
</body>

Установим для HTML-элемента div фон и высоту в его стиле в заголовочной части этой HTML-страницы, чтобы сделать этот HTML-элемент видимым (без содержимого этот HTML-элемент имеет высоту 0 пикселей и поэтому в браузере его не видно):
<style>
div {
  background: red;
  height: 15px;
}
</style>

У меня в браузере это выглядит так (я увеличил снимок экрана в графическом редакторе в 8 раз, чтобы можно было рассмотреть попиксельно):

Серые линии сверху и слева — это уже часть окна браузера. Я оставил их на картинке, чтобы можно было понять, где находится HTML-элемент div относительно границ области просмотра браузера. Правая и нижняя части области просмотра частично выходят за правую и нижнюю границы картинки, поэтому их не видно (мне был интересен только левый верхний угол области просмотра браузера). Квадратных розовых пикселей в оригинале не было, я дорисовал их в графическом редакторе, чтобы можно было посчитать расстояние от HTML-элемента div до границ области просмотра браузера.

Как видно на картинке, расстояние между HTML-элементом div и границами области просмотра браузера составило 8 пикселей.

Откуда они взялись, если ни у HTML-элемента div, ни у родительского HTML-элемента body в стилях не описаны какие-либо отступы? Я об этом уже писал, для HTML-элемента body в моем браузере определен по умолчанию внешний отступ margin размером в 8 пикселей.

Хорошо, определим для HTML-элемента div свой внешний отступ размером в 5 пикселей. Внесем изменение в стили:

<style>
div {
  background: red;
  height: 15px;
  margin: 5px;     /* свой отступ */
}
</style>

Вот что получилось у меня в браузере (увеличение в 8 раз остается):

Как видно на картинке, теперь расстояние от левой границы области просмотра браузера до HTML-элемента div составляет 13 пикселей, а от верхней границы области просмотра браузера до HTML-элемента div составляет те же 8 пикселей, что и для предыдущего случая.

Что произошло? Почему эти расстояния разные? В случае расстояния слева всё понятно: произошло сложение внешних отступов родительского HTML-элемента body (8 пикселей) и вложенного в него HTML-элемента div (5 пикселей), в результате чего получилось 13 пикселей.

В случае же расстояния сверху произошло то самое (заявленное в начале поста) явление схлопывания внешних отступов. В данном случае произошло схлопывание внешних отступов родительского HTML-элемента body и вложенного в него HTML-элемента div (это лишь одна из ситуаций, в которых может возникать схлопывание внешних отступов).

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

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

Зачем придумали схлопывание внешних отступов по вертикали? Такое схлопывание полезно, например, для параграфов текста, то есть для отображения HTML-элементов p (это совершенно другая ситуация, в которой действует схлопывание внешних отступов: в этой ситуации схлопываются внешние отступы соседних, примыкающих друг к другу, HTML-элементов, а не вложенных, как в нашем случае). Между соседними параграфами текста (если они заключены в HTML-элементы p) браузер отображает расстояние размером только в один внешний отступ, а не в два, как следовало бы по логике: один внешний отступ от первого параграфа, второй внешний отступ — от примыкающего к первому второго параграфа.

* * *
Как избавиться от такого вот схлопывания внешних отступов по вертикали, если это нам потребуется (то есть нам нужно, чтобы в рассматриваемой ситуации были видны оба внешних отступа: от родительского и от вложенного HTML-элементов)? В интернетах можно найти много статей по этому поводу, но мне понравились ответы на соответствующий вопрос по следующей ссылке:

https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing

В первую очередь там советуют попробовать добавить родительскому HTML-элементу (для нашего случая) в стиль границу border в 1 пиксель, либо внутренний отступ padding в 1 пиксель. Это, конечно, работает (я проверил), но создает проблему, если граница или внутренний отступ нам строго не нужны.

Во-вторых, там предлагают попробовать добавить родительскому HTML-элементу (для нашего случая) в стиль определение свойства overflow со значением, отличным от visible (последнее является значением по умолчанию для этого свойства). Например, можно добавить в стиль указание overflow: auto; или overflow: hidden;.

Для нашего случая это неожиданно не сработало. Почему? Ответ можно найти по следующей ссылке:

https://stackoverflow.com/questions/41506456/why-body-overflow-not-working

Именно в случае, если родительский HTML-элемент является HTML-элементом body и мы хотим избавиться от схлопывания внешних отступов по вертикали в рассматриваемом случае, то для HTML-элемента html тоже следует определить свойство overflow со значением, отличным от visible, например, так:

<style>
html, body {
  overflow: auto;
}

div {
  background: red;
  height: 15px;
  margin: 5px;
}
</style>

Ну а лично мне для избавления от схлопывания внешних отступов по вертикали в рассматриваемом случае больше всего понравился следующий вариант:
<style>
body {
  padding: 0.05px;
}

div {
  background: red;
  height: 15px;
  margin: 5px;
}
</style>

Вроде бы, тут мы тоже добавляем в родительский HTML-элемент внутренний отступ. Но только теперь размер этого внутреннего отступа не 1 пиксель, как было предложено ранее, а 0,05 пикселя.

Что это нам дает? То, что мы определили внутренний отступ у родительского HTML-элемента, убирает схлопывание внешних отступов по вертикали родительского и вложенного HTML-элементов. Но когда браузер начинает рассчитывать окончательные размеры и отступы HTML-элементов для их отображения, он округляет полученные значения до целого, так как область просмотра браузера всё равно имеет размеры в целых пикселях и отобразить в ней что-либо можно только в целых пикселях (хотя для промежуточных расчетов браузер может использовать дробные значения в пикселях). Из-за того, что значение отступа слишком мало (0,05 пикселя), оно просто теряется при округлениях и никакого отступа в браузере в итоге не отображается. А нам это и нужно.

Источник:
https://stackoverflow.com/a/33132624

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

Дополнение от 16 августа: решение с padding: 0.05px; мне разонравилось, как только я начал применять его на практике. Хоть оно и работает, но при тестировании решений задач, когда я вывожу размеры разных HTML-элементов в лог с помощью функции console.log, выводятся дробные значения, что мешает отладке (сложнее понять, что происходит в скрипте).

Границы и отступы в потоке

Через день после написания статьи про поток я вдруг обнаружил, что совершенно бессовестным образом позабыл написать там о том, как он работает с точки зрения именно раскладки. Забыл, то есть, самую суть :-).

Исправляю это упущение!

Даем место

Очень часто при раскладке страницы возникает задача вынуть что-то из общего потока страницы и повесить рядом с основным содержимым и оформить в виде плавающей панельки.

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

Вот здесь и начинают работать границы и отступы. Их основная задача: сдвинуть край блока в потоке, чтобы дать место для чего-то другого. Задаются они свойствами margin-left, margin-right, padding-left, padding-right.

Часто в разных форумах наталкиваюсь на «извечные вопросы», один из которых: что использовать — margin или padding. Причем, «экспертные» ответы бывают часто в духе «надо использовать всегда только margin (padding), потому что padding (margin) глючит». Это, конечно, неверно. Глючить та или иная раскладка может по миллиону причин, и выбор отступов или границ тут редко реально виноват.

Суть выбора же предельно проста: padding находится внутри границ, и на нем нарисован фон бокса, а margin — за границами, и он прозрачен. Поэтому выбирать надо исходя из того, как вы хотите, чтобы оставляемое пустое место выглядело: внутри блока или снаружи. Если же у вас нет ни фона, ни границ, то разницы никакой и нет. Хоть монетку подкидывайте.

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

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

Схлопывание границ («margin collapsing») — это на первый взгляд странный эффект, который наблюдается с верхней и нижней границами блоков. Проявляется он двояко.

Наложение границ соседей

Первое проявление — это когда границы между двумя соседними блоками «проваливаются» друг в друга. Для примера возьмем два блока — заголовок и абзац, идущие в потоке один за другим:

<h2>Заголовок</h2>
<p>Абзац текста</p>

Дадим заголовку верхнюю и нижнюю границу в 20 пикселов, а абзацу — в 10.

h2 {
  margin:20px 0;
}

p {
  margin:10px 0;
}

Кстати, вот эти «10px 0» — это удобная сокращенная запись. Первая цифра задает верх и низ, вторая — право и лево. Она подходит не только для margin’ов, но и для всех остальных свойств, которые могут задаваться для сторон бокса.

Так вот, нижняя граница заголовка и верхняя граница абзаца наложатся друг на друга и между ними будет не 30 пикселов, а 20 (по наибольшей границе).

Вываливание за родительские границы

Эта штука менее очевидна. Представьте себе несколько абзацев, идущих один за другим, заключенных в один общий блок-контейнер:

<div>
  <p>абзац</p>
  <p>абзац</p>
  <p>абзац</p>
</div>

Дадим и контейнеру и абзацам верхние и нижние границы:

p {
  margin:10px 0;
}

div {
  margin:5px 0;
}

Здесь схлопывание проявляется в том, что верхний margin первого абзаца не лежит внутри div’а, а вываливается из него наверх.

Margin самого контейнера и margin первого блока накладываются, и в итоге место перед контейнером равно наибольшему из них.

Тоже самое происходит и внизу с нижними margin’ами контейнера и последнего вложенного блока.

Отчего так

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

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

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

Вываливание границы за пределы родителя тоже имеет свой смысл. В первую очередь — для списков. Представим себе текст, в котором есть список. Элемент списка (<li>) содержит абзац (<p>). И у абзаца, и у элемента списка есть свои границы.

Так вот, если бы верхняя граница абзаца не вываливалась из элемента списка наверх, то текст абзаца съезжал бы вниз, и не был бы напротив точечки списка. А это некрасиво.

Проблемы при раскладке

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

<body>
  <div>
    <h2>Суперконтора</h2>
    <p><small>Суперконторим с 1381 года</small></p>
  </div>
</body>

Дальше по совету гипотетического мегадизайнера нашей суперконторы мы хотим, чтобы весь верхний блок прилегал к краям страницы, имел темно-красный фон, заголовок «Суперконтора» имел бы ярко-красный фон, а текст внутри всего верхнего блока был белым. И кроме того, хочется, чтобы вокруг текста были определенные отступы. Тогда гиперверстальщик нашей суперконторы пишет такой стиль:

body {
  margin:0;
}

#header {
  background-color:darkred; color:white;
}

#header h2 {
  margin:20px 0 10px 0;
  background-color:red;
}

#header p {
  margin:5px 0;
}

И получается у нас вот такое:

Белое пространство над верхним блоком — это вывалившийся из него верхний margin заголовка! Явно не то, чего нам хотелось. Нам хотелось, чтобы этот margin сидел внутри верхнего блока, и чтобы вместо дешевенького белого фона там был трендовый темно-красный! Хотя с точки зрения чистого текст все нормально — 20 пикселов свободного места сверху заголовка присутствуют. Но теперь, поскольку у нас есть фон, нам далеко не все равно, сидит этот margin внутри верхнего блока или вываливается наружу.

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

  1. Вываливание отменяется, если блоку-контейнеру назначить padding или border (с той стороны, где вываливается). В нашем примере это будет выглядеть так:

    #header {
      background-color:darkred; color:white;
      padding:1px 0;
    }
    

    Минус состоит в том, что высота всего верхнего блока увеличивается на 2 пиксела. Это может и не быть чем-то страшным, но если на высоту этого блока ориентируются другие элементы дизайна, то это не очень хорошо. И нет, нулевой padding не заработает :-). Это все равно, что его нет. 2. В случае, когда пикселы все же лишние, есть другой способ. Можно вываливающуюся верхнюю границу у заголовка убрать, а вместо нее поставить верхний padding самому контейнеру. Визуально эффект будет как раз нужный. И то же самое можно проделать и снизу блока.

    #header {
      padding-top:20px; padding-bottom:5px;
    }
    
    #header h2 {
      margin:0 0 10px 0;
    }
    
    #header p {
      margin:5px 0 0 0;
    }
    

    Сокращенная запись из четырех чисел расставляет значения, начиная с верхнего по часовой стрелке (верх, право, низ, лево). То есть, запись 0 0 10px 0 означает «все границы — 0, нижняя — 10 пикселов».

    Правда, в этом случае CSS уже получается слегка более дремучим, что затрудняет понимание написанного через недельку-другую. 3. Еще один способ отключить вываливание строится на том, что оно, как я говорил, придумано для форматирования текстовых блоков в потоке. А для блоков, исключенных из потока, вываливание отменяется. Ну а чтобы изъять блок из потока, его можно, например, спозционировать абсолютно. Забегая вперед скажу, что есть еще один способ — свойство float, но о нем будет целая следующая статья.

    Однако надо сказать, что позиционирование — это все же не способ «исправления» ситуации. Потому что если в странице взять, да и изъять из потока какой-то блок, то скорее всего все вокруг сломается :-). Поэтому этот способ можно переформулировать: если вы все равно собирались блок позиционировать абсолютно, то о проблеме вываливания границ можно не заботиться.

Итог

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

СпособПлюсыМинусы
Отменяющие однопиксельные padding или border Очень простой способ Лишние пикселы в дизайне зачастую недопустимы
Полная замена крайних margin’ом вложенных блоков padding’ами контейнера Полная визуальная идентичность желаемому Задание отуступов «размазывается» по разным правилам в стилях, что их неприятно усложняет
Абсолютное позиционирование или float Полная визуальная идентичность и простота Блок вынимается из потока и меняет раскладку

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

Как установить отступ внутри элемента с помощью CSS?

В этой статье мы рассмотрим, как установить отступ внутри элемента с помощью CSS. Под отступом понимается пространство между содержимым и его границей. Заполнение создает пространство внутри определенных границ. Разница между padding и margin заключается в том, что margin создает пространство за пределами границ, а padding создает пространство для содержимого внутри границы (граница — это просто любой тег, которому назначена его область).

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

Синтаксис:

 /* Установить отступы со всех сторон
   заполнение: числоpx;

/* Устанавливаем отступы на определенную сторону
   верхняя часть отступа: числоpx;
   заполнение справа: числоpx;
   отступ слева: числоpx;
   нижний отступ: числоpx; 

 

Подход: Мы создадим тег кнопки, установив отступы с разных сторон, используя свойство padding в CSS. Ниже приведен код, иллюстрирующий использование отступов.

Пример:

< Lang = "EN" >

< головки >

< стиль >

4 кнопка {

Padding-Top: 10px;

       padding-bottom: 20px;

       padding-right: 30px;

       padding-left: 40px;

}

стиль >

головка >

< тела >

< кнопка >

GeeksforGeeks

кнопка >

тела >

HTML >

>



Объяснение: Объяснение: Здесь мы создали кнопку, а затем использовали CSS, чтобы изменить свой свойство заполнения с каждой стороны по-разному.

 

 

Все, что вам нужно знать о полях CSS — Smashing Magazine

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

Одной из первых вещей, которую большинство из нас усвоило, изучая CSS, были детали различных частей блока в CSS, описанные как модель блока CSS.Одним из элементов блочной модели является поле, прозрачная область вокруг блока, которая будет отталкивать другие элементы от содержимого блока. Свойства margin-top , margin-right , margin-bottom и margin-left были описаны в CSS1 вместе с сокращением margin для одновременной установки всех четырех свойств.

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

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

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

Изображение блочной модели CSS в CSS1

Четыре свойства поля для каждой стороны блока и сокращение поля были определены в CSS1.

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

Отказ от блочной модели CSS в CSS2

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

Еще после прыжка! Продолжить чтение ниже ↓

Margin Collapsing

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

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

Поля рушатся в следующих ситуациях:

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

Смежные одноуровневые элементы

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

В приведенном ниже примере CodePen есть три элемента div . Первый имеет верхнее и нижнее поле по 50 пикселей.Второй имеет верхнее и нижнее поле 20 пикселей. Третий имеет верхнее и нижнее поле 3em. Поле между первыми двумя элементами составляет 50 пикселей, так как меньшее верхнее поле объединяется с большим нижним полем. Поле между вторыми двумя элементами в 3em, так как 3em больше, чем 20 пикселей внизу второго элемента.

См. Pen [Поля: смежные элементы] (https://codepen.io/rachelandrew/pen/OevMPo) Рэйчел Эндрю.

См. Поля пера: соседние братья и сестры Рэйчел Эндрю.

Полностью пустые блоки

Если блок пуст, его верхнее и нижнее поля могут совпасть друг с другом. В следующем примере CodePen элемент с классом empty имеет верхнее и нижнее поле по 50 пикселей, однако расстояние между первым и третьим элементами составляет не 100 пикселей, а 50. Это происходит из-за схлопывания двух полей. Добавление чего-либо в это поле (даже заполнения) приведет к тому, что верхнее и нижнее поля будут использоваться, а не свернутся.

См. Pen [Поля: пустые поля](https://codepen.io/rachelandrew/pen/JQLGMr) Рэйчел Эндрю.

См. Поля ручки: пустые коробки Рэйчел Эндрю.

Родительский и первый или последний дочерний элемент

Это сценарий схлопывания полей, который чаще всего бросается в глаза людям, поскольку он не кажется особенно интуитивным. В следующем CodePen у меня есть div с классом оболочки, и я дал этому div контур красным, чтобы вы могли видеть, где он находится. Все три дочерних элемента имеют отступ в 50 пикселей.Однако первый и последний элементы находятся на одном уровне с краями обертки; между элементом и оболочкой нет поля в 50 пикселей.

См. Pen [Поля: поля для первого и последнего дочерних элементов] (https://codepen.io/rachelandrew/pen/BgrKGp) Рэйчел Эндрю.

См. Поля пера: поля для первого и последнего дочерних элементов Рэйчел Эндрю.

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

DepvTools может помочь вам увидеть, где заканчивается ваша маржа

Только блочные поля рушатся

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

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

Вещи, предотвращающие сжатие полей

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

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

Например, поле, полностью пустое от содержимого, не свернет свое верхнее и нижнее поле, если к нему применены границы или отступы.В приведенном ниже примере я добавил отступ в поле на 1 пиксель. Теперь над и под полем есть поле в 50 пикселей.

See the Pen [Поля: пустые поля с отступами не схлопываются] (https://codepen.io/rachelandrew/pen/gNeMpg) Рэйчел Эндрю.

См. Поля пера: пустые поля с отступами не схлопываются Рэйчел Эндрю.

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

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

См. перо [Поля: поля первого и последнего дочерних элементов не схлопываются, если у родителя есть граница](https://codepen.io/rachelandrew/pen/vqRKKX) Рэйчел Эндрю.

См. поля пера: поля первого и последнего дочерних элементов не схлопываются, если у родителя есть граница Рэйчел Эндрю.

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

Создание контекста блочного форматирования

Новый контекст блочного форматирования (BFC) также предотвратит схлопывание полей через содержащий элемент. Если мы снова посмотрим на пример первого и последнего дочерних элементов, поля которых оказались за пределами оболочки, и дадим оболочке display: flow-root , тем самым создав новый BFC, поля останутся внутри.

See the Pen [Поля: новый контекст форматирования блоков содержит поля] (https://codepen.io/rachelandrew/pen/VJXjEp) Рэйчел Эндрю.

См. поля пера: новый контекст форматирования блоков содержит поля, автор Рэйчел Эндрю.

Чтобы узнать больше о display:flow-root , прочитайте мою статью «Понимание макета CSS и контекста форматирования блоков». Изменение значения свойства overflow на auto будет иметь тот же эффект, поскольку при этом также создается новый BFC, хотя в некоторых сценариях также могут создаваться полосы прокрутки, которые вам не нужны.

Контейнеры Flex и Grid

Контейнеры Flex и Grid устанавливают контексты форматирования Flex и Grid для своих дочерних элементов, поэтому их поведение отличается от блочного макета.Одно из этих отличий заключается в том, что поля не схлопываются:

«Гибкий контейнер устанавливает новый гибкий контекст форматирования для своего содержимого. Это то же самое, что и установка контекста форматирования блока, за исключением того, что вместо блочного макета используется гибкий макет. Например, плавающие элементы не вторгаются во flex-контейнер, а поля flex-контейнера не схлопываются вместе с полями его содержимого».

— Flexbox Level 1

Если мы возьмем приведенный выше пример и превратим обертку в контейнер flex, отображающий элементы с flex-direction: column , вы увидите, что поля теперь содержатся оберткой.Кроме того, поля между соседними гибкими элементами не схлопываются друг с другом, поэтому мы получаем 100 пикселей между гибкими элементами, всего 50 пикселей сверху и снизу элементов.

See the Pen [Поля: поля на гибких элементах не схлопываются] (https://codepen.io/rachelandrew/pen/mZxreL) Рэйчел Эндрю.

См. Поля пера: поля на гибких элементах не схлопываются, Рэйчел Эндрю.

Стратегии маржи для вашего сайта

Из-за того, что маржа рушится, рекомендуется разработать последовательный способ работы с маржей на вашем сайте.Самое простое, что можно сделать, это определить поля только для верхних 90 221 или 90 222 нижних элементов. Таким образом, вы не должны слишком часто сталкиваться с проблемами схлопывания полей, поскольку сторона с полем всегда будет примыкать к стороне без поля.

Примечание : У Гарри Робертса есть отличный пост, в котором подробно описываются причины, по которым установка полей только в одном направлении является хорошей идеей, а не только из-за решения проблем со схлопыванием полей.

Это решение не решает проблемы, с которыми вы можете столкнуться, когда поля для дочерних элементов рушатся из-за их родителя.Эта конкретная проблема, как правило, встречается реже, и знание того, почему это происходит, может помочь вам найти решение. Идеальным решением для этого является предоставление компонентам, которые требуют display:flow-root , в качестве запасного варианта для старых браузеров вы можете использовать overflow для создания BFC, превращения родителя в контейнер flex или даже введения одного пиксель заполнения. Не забывайте, что вы можете использовать запросы функций для обнаружения поддержки отображения : flow-root , чтобы только старые браузеры получали менее оптимальное исправление.

В большинстве случаев я считаю, что ключевым моментом является знание того, почему маржа падает (или не падает). Затем вы можете выяснить в каждом конкретном случае, как с этим бороться. Что бы вы ни выбрали, обязательно поделитесь этой информацией со своей командой. Довольно часто схлопывание маржи немного загадочно, поэтому причина противодействия этому может быть неочевидной! Комментарий в вашем коде очень поможет — вы даже можете дать ссылку на эту статью и помочь поделиться знаниями о схлопывании полей.

Я решил завершить эту статью несколькими другими сведениями о полях.

Поля в процентах

Когда вы используете процент в CSS, это должен быть процент от чего-то. Поля (и отступы), установленные с использованием процентов, всегда будут в процентах от встроенного размера (ширины в режиме горизонтального письма) родителя. Это означает, что при использовании процентов у вас будет отступ одинакового размера по всему элементу.

В приведенном ниже примере CodePen у меня есть обертка шириной 200 пикселей, внутри находится поле с полем 10%, поле составляет 20 пикселей со всех сторон, что составляет 10% от 200.

См. Pen [Поля: процентные поля] (https://codepen.io/rachelandrew/pen/orqzrP) Рэйчел Эндрю.

См. Поля пера: процентные поля Рэйчел Эндрю.

Поля в мире относительно потока

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

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

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

  • 5 Margin-Top = Margin-Block-Start Margin-Project = Margin-Innine-End Margin-Dote = Margin-Block-End-End 0
  • -left = margin-inline-start

У нас также есть два новых сокращения, которые позволяют устанавливать оба блока сразу или оба встроенных.

  • margin-block
  • margin-inline

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

См. Pen [Поля: относительные поля потока] (https://codepen.io/rachelandrew/pen/BgrQRj) Рэйчел Эндрю.

См. Поля пера: относительные поля потока Рэйчел Эндрю.

Вы можете прочитать больше о логических свойствах и значениях на MDN или в моей статье «Понимание логических свойств и значений» здесь, в Smashing Magazine.

Подведение итогов

Теперь вы знаете почти все, что нужно знать о полях! Вкратце:

  • Коллапс маржи — это вещь. Понимание того, почему это происходит и когда это не помогает, поможет вам решить любые проблемы, которые могут возникнуть.
  • Установка полей только в одном направлении решает многие проблемы, связанные с полями.
  • Как и везде в CSS, делитесь с вашей командой решениями, которые вы принимаете, и комментируйте свой код.
  • Размышление о блочных и встроенных размерах, а не о физических верхней, правой, нижней и левой частях, поможет вам, поскольку Интернет движется к тому, чтобы быть независимым от режима письма.
(il)

Как удалить отступы и поля по умолчанию для элементов внутри div - HTML и CSS - Форумы SitePoint

vngx #1

Привет

это мой jsfiddle
http://jsfiddle.сеть/vngx/0bhdnkuz/7/

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

Как я могу это сделать?

Если я понимаю, о чем вы спрашиваете, я бы избавился от всех чисел с плавающей запятой и вместо этого использовал table-cell.

Я удалил все встроенные css и поместил их в таблицу стилей

  .топИзображениеБлок {
    цвет фона: красный;
    ширина:100%;
    минимальная высота: 80 пикселей;
    заполнение: 0;
    маржа: 0;
}

.vcontainer {
    отображение: таблица-ячейка;
    минимальная высота: 10em;
    граница: 1px сплошная #000;
    набивка: 1em;
}

input[type=submit] { ширина:70px; высота: 40 пикселей; }

.vcontainer изображение {
вертикальное выравнивание: посередине;
}
метка{
дисплей:блок;
}
  
  <дел>
    

Нет изображения для отображения

<дел>
Новая загрузка:  <диапазон>

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

система закрыто #4

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

Интервал

· Начальная загрузка

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

Как это работает

Назначьте адаптивные значения margin или padding элементу или подмножеству его сторон с помощью сокращенных классов. Включает поддержку отдельных свойств, всех свойств, а также вертикальных и горизонтальных свойств. Классы строятся из карты Sass по умолчанию в диапазоне от .25rem до 3rem .

Обозначение

Утилиты Spacing, которые применяются ко всем точкам останова, от xs до xl , не содержат аббревиатур точки останова.Это связано с тем, что эти классы применяются от min-width: 0 и выше и, таким образом, не связаны медиа-запросом. Однако остальные точки останова содержат аббревиатуру точки останова.

Классы именуются в формате {property}{sides}-{size} для xs и {property}{sides}-{точка останова}-{size} для sm , md , LG и XL .

Где свойство является одним из:

  • м - для классов, которые устанавливают запас
  • p - для классов которые устанавливают padding

Где сторона одна из:

  • t - для классов, которые устанавливают margin-top или padding-top
  • b - для классов, которые устанавливают margin-bottom или padding-bottom
  • l - для классов, которые устанавливают margin-left или padding-left
  • r - для классов, которые устанавливают margin-right или padding-right
  • x - для классов, которые устанавливают как *-левый , так и *-правый
  • y - для классов, которые устанавливают как *-top , так и *-bottom
  • пустой - для классов, которые устанавливают поля или отступы на всех 4-х сторонах элемента

Где размер является одним из:

  • 0 - для классов, которые устраняют margin или padding , устанавливая его на 0
  • 1 — (по умолчанию) для классов, которые устанавливают margin или padding до $spacer * .25
  • 2 — (по умолчанию) для классов, которые устанавливают margin или padding от до $spacer * .5
  • 3 — (по умолчанию) для классов, которые устанавливают margin или padding от до $spacer
  • 4 — (по умолчанию) для классов, которые устанавливают margin или padding от до $spacer * 1.5
  • 5 — (по умолчанию) для классов, которые устанавливают margin или padding от до $spacer * 3
  • auto — для классов, которые устанавливают margin на auto

(Вы можете добавить дополнительные размеры, добавив записи в переменную карты $spacers Sass.)

Примеры

Вот несколько репрезентативных примеров этих классов:

  .mt-0 {
  верхняя граница: 0 !важно;
}

.мл-1 {
  левое поле: ($spacer * .25) !важно;
}

.px-2 {
  padding-left: ($spacer * .5) !важно;
  padding-right: ($spacer * .5) !важно;
}

.p-3 {
  заполнение: $спейсер !важно;
}  

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

Кроме того, Bootstrap также включает класс .mx-auto для горизонтального центрирования содержимого на уровне блоков с фиксированной шириной, то есть содержимого, которое имеет display: block и набор ширины — путем установки горизонтальных полей на auto .

  <дел>
  Центральный элемент