Освоение Margin, Padding и блочные модели CSS

Введение

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

Margin в CSS

Margin(внешний отступ) используется для управления расстоянием между элементами на веб-странице.

Оно создает пространство между границей элемента и соседними элементами.

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

Свойства Margin:

margin-top: устанавливает отступ на верхней стороне.
margin-bottom: устанавливает отступ с нижней стороны.
margin-left: устанавливает отступ с левой стороны.
margin-right: устанавливает отступ с правой стороны.

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

Значения Margin:

auto – браузер вычисляет margin.
length – определяет margin в px, pt, cm, etc.
% – определяет margin в % от ширины контейнера.
inherit – создает margin, наследуемое от родительского элемента.

Примеры Margin

В приведенном ниже примере представлены два margin без каких-либо полей, примененных к ним.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Margin</title>
    <style>
      .box {
        height: 200px;
        width: 200px;
      }
      .box1 {
        background-color: #74b7b7;
      }
      .box2 {
        background-color: #286c6e;
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
  </body>
</html>

Вывод приведенного выше кода:

Теперь, чтобы отделить блоки друг от друга, добавьте к ним отступы(margin). Вот код:

.box {
  height: 200px;
  width: 200px;
}
.box1 {
  background-color: #74b7b7;
  margin-top: 5%;
  margin-left: 10%;
  margin-bottom: 3%;
}
.box2 {
  background-color: #286c6e;
  margin-top: 2%;
  margin-left: 10%;
}

Результат:

Сокращения

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

Синтаксис:

margin: top right bottom left;

Ниже приведены четыре варианта применения сокращения свойства margin.

margin: 5px 2px 3px 10px;
Здесь верхний отступ равен 5px, правый и левый отступ равны 2px, нижний отступ равен 3 px, а левый отступ равен 10px.
margin: 5px 2px 10px;
Здесь верхний отступ равен 5px, правый и левый отступ равны 2px, а нижний отступ равен 10px.
margin: 5px 10px;
Здесь верхнее и нижнее отступы равны 5px, а левое и правое – 10px.
margin: 5px;
Здесь все четыре отступа равны 5px.

Padding в CSS

Padding(внутренний отступ) используется для создания пространства между содержимым элемента и его границей.

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

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

Свойства padding:

padding-top: Это свойство используется для установки padding (отступа) с верхней стороны.
padding-bottom: Это свойство используется для установки padding (отступа) с нижней стороны.
padding-left: Это свойство используется для установки padding (отступа) с левой стороны.
padding-right: Это свойство используется для установки padding (отступа) с правой стороны.

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

Значения padding:

length – определяет padding в px, pt, cm, etc.
% – определяет padding в % от ширины контейнера.
inherit – создает padding, наследуемое от родительского элемента.

Примеры Padding

В приведенном ниже примере содержимое представлено без каких-либо отступов внутри поля.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Padding</title>
    <style>
      .box {
        background-color: #bbb0a2;
      }
    </style>
  </head>
  <body>
    <div class="box">This is box content.</div>
  </body>
</html>

Вывод приведенного выше кода:

Теперь, чтобы добавить пробел между содержимым и полем, добавьте свойство padding. Вот код:

.box {
    background-color: #bbb0a2;
    padding-top: 50px;
    padding-right: 40px;
    padding-bottom: 50px;
    padding-left: 100px;
}

Результат:

Сокращения

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

Синтаксис:

padding: top right bottom left;

Ниже приведены четыре варианта применения сокращенного свойства padding.

padding: 5px 2px 3px 10px;

Здесь верхнее отступление равно 5px, правое отступление равно 2px, нижний отступ равен 3px, а левое отступление равно 10px.
padding: 5px 2px 10px;
Здесь для верхнего отступа установлено значение 5px, для правого и левого отступов установлено значение 2px, а для нижнего отступа установлено значение 10px.
padding: 5px 10px;
Здесь для верхнего и нижнего отступов задано значение 5px, а для левого и правого отступов – 10px.
padding: 5px;
Здесь все четыре отступа имеют значение 5px

Padding и ширина элемента

Если вы примените свойство padding к указанному элементу width, то заполнение этого элемента будет добавлено к общей ширине элемента. Например

.box {
    background-color: #bbb0a2;
    width: 100px;
    padding: 20px;
}

Тогда общая ширина вышеуказанного элемента составит 140px (ширина элемента 100px + 20px левого отступа + правое отступление на 20px).

Таким образом, для поддержания фактической ширины элемента вы можете использовать свойство box-sizing.

.box {
   background-color: #bbb0a2;
   width: 100px;
   padding: 20px;
   box-sizing: border-box;
}

Разница между Margin and Padding

Margin	Padding
Создайте пространство между границей элемента и соседними с ним элементами.	Создайте пространство между содержимым элемента и его границей.
Применяется к внешней стороне элемента.	Создайте пространство между границей элемента и соседними с ним элементами.

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

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

content: включает в себя текст, изображения или другие HTML-элементы.
padding: это пространство между содержимым элемента и его границей.
border: это линия, которая окружает заполнение и содержимое элемента.
margin: это пространство между границей элемента и соседними с ним элементами.

На изображении ниже приведена блочная модель.

Заключение

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

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

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

Введение

Margin в CSS

Свойства Margin:

Значения Margin:

Примеры Margin

Сокращения

Padding в CSS

Свойства padding:

Значения padding:

Примеры Padding

Сокращения

Padding и ширина элемента

Разница между Margin and Padding

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

Заключение

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

Топ-5 бесплатных библиотек для создания динамических диаграмм Ганта: руководство для веб-разработчиков”

Что такое HCM-платформа? Краткое руководство

Лучшие библиотеки http на PHP

Освоение Margin, Padding и блочные модели CSS