Как сделать расстояние между блоками в css

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

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

Для примера создадим блок и установим ему внутренние отступы 30 пикселей, а внешние 50 пикселей. Чтобы видеть внешний отступ, создадим ещё один блок. Установим блокам рамки для определения края блока.

Обратите внимание — второй блок, которому не установлены отступы, не касается краёв страницы, а находится от них на определённом расстоянии. Это происходит потому, что у тега <body> есть внутренние отступы. Их можно отменить, то есть, сделать равными нулю, как и у любого элемента.

ВАЖНО: Внешние отступы соседних блоков не суммируются. Расстояние между блоками равно большему отступу. Например, если у одного блока margin равно 20 пикселей, а у второго блока margin равно 10 пикселей, то расстояние между блоками будет 20 пикселей.

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

Добавим на страницу блок и установим ему внутренние отступы сверху и слева:

Попробуйте установить блоку различные внутренние и внешние отступы, посмотрите, как они работают.

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

2.2. CSS блочная модель

Модуль CSS Box Model описывает свойства padding и margin , которые создают поля внутри и отступы снаружи CSS блока. Размеры блока также могут быть увеличены за счет рамки.

Каждый блок имеет прямоугольную область содержимого в центре, поля вокруг содержимого, рамку вокруг полей и отступ за пределами рамки. Размеры этих областей определяют свойства padding и его подсвойства &#8212; padding-left , padding-top и т.д., border и его подсвойства, margin и его подсвойства.

CSS блочная модель в деталях

  • Содержание:

1. Определение блочной модели

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

  • край содержимого
  • край поля
  • край рамки
  • край отступа

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

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

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

2. Отступы элемента

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

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

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

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

margin-bottom: 30px; width: 100%; display: inline-block;

margin-top: 15px; width: 100%; display: inline-block;

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

Отступы не схлопываются:

  • Между плавающим блоком и любым другим блоком;
  • У плавающих элементов и элементов со значением overflow , отличным от visible , со своими дочерними элементами в потоке;
  • У абсолютно позиционированных элементов, даже с их дочерними элементами;
  • У строчно-блочных элементов.

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

2.2. Выпадение вертикальных отступов

Если внутри одного блока расположить другой блок и задать ему margin-top , то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок &#171;выпадет&#187; из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.

Чтобы избавиться от эффекта выпадения, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent .

2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left

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

Свойства не наследуются.

margin-top/margin-right/margin-bottom/margin-left
Значения:
длина Размер отступа задается в единицах длины, например, px , in , em . Значение по умолчанию 0 .
% Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента.
auto Для элементов уровня строки, плавающих ( float ) значения margin-left или margin-right вычисляются в 0 . Если для элементов уровня блока задано margin-left: auto или margin-right: auto &#8212; соответствующее поле расширяется до края содержащего блока, если оба &#8212; их значения становятся равными, что горизонтально центрирует элемент относительно краев содержащего блока.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
2.4. Краткая запись отступов: свойство margin

Свойство margin является сокращенным свойством для установки margin-top , margin-right , margin-bottom и margin-left в одном объявлении.

Если существует только одно значение, оно применяется ко всем сторонам.

Если два &#8212; верхний и нижний отступы устанавливаются на первое значение, а правый и левый &#8212; устанавливаются на второе.

Если имеется три значения &#8212; верхний отступ устанавливается на первое значение, левый и правый &#8212; на второе, а нижний &#8212; на третье.

Если есть четыре значения &#8212; они применяются сверху, справа, снизу и слева соответственно.

3. Поля элемента

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

Фоны элемента по умолчанию закрашивают поля элемента и пространство под его рамкой. Это поведение можно настроить с помощью свойств background-origin и background-clip.

3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left

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

Свойства не наследуются.

padding-top/padding-right/padding-bottom/padding-left
Значения:
длина Поля элемента задаются при помощи единиц длины, например, px , pt , cm . Значение по умолчанию 0 .
% Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Поля сверху и снизу равны полям слева и справа, т.е. верхние и нижние поля тоже вычисляются относительно ширины элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
3.2. Краткая запись полей: свойство padding

Свойство padding является сокращенным свойством для установки padding-top , padding-right , padding-bottom и padding-left в одном объявлении.

Если существует только одно значение, оно применяется ко всем сторонам.

Если есть два значения, верхнее и нижнее поля устанавливаются на первое значение, а правое и левое &#8212; на второе.

Если имеется три значения, верхнее поле устанавливается на первое значение, левое и правое &#8212; на второе, а нижнее &#8212; на третье.

Если есть четыре значения &#8212; они применяются сверху, справа, снизу и слева соответственно.

4. Рамки элемента

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

Расстояние между блоками CSS [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow &#x43D;&#x430; &#x440;&#x443;&#x441;&#x441;&#x43A;&#x43E;&#x43C;.

Закрыт 2 года назад .

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *