Разница между маржей и отступами

Margin vs Padding
 

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

Что такое Padding?

В CSS (Каскадные таблицы стилей), отступ - это пространство между содержимым и границей. Он отделяет содержимое блока от его края. Заполнение является прозрачным и включает в себя фоновое изображение или цвет фона элемента. Степень заполнения элемента указывается с помощью термина «отступ» в коде CSS. Например, чтобы добавить отступы 25px вокруг содержимого, можно использовать следующий код.

div
ширина: 300 пикселей;
высота: 300 пикселей;
отступы: 25 пикселей;
граница: 25px solid;

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

div
ширина: 300 пикселей;
высота: 300 пикселей;
padding-top: 25px;
отступ - 35 пикселей;
отступ слева: 5 пикселей;
отступ справа: 10 пикселей;
граница: 25px solid;

Что такое маржа?

В CSS (каскадные таблицы стилей) поле - это пространство за пределами границы. Он отделяет блок от других блоков. Поле также прозрачно, но большое отличие от отступов заключается в том, что поле не включает фоновые изображения или цвета фона, примененные к элементу. Размер маржи в CSS указывается с помощью термина «маржа». Следующий фрагмент кода применяет поле 25px вокруг блока div.

div
ширина: 320 пикселей;
высота: 320 пикселей;
граница: 5px solid;
поле: 25px;

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

div
ширина: 320 пикселей;
высота: 320 пикселей;
граница: 5px solid;
margin-top: 25px;
нижнее поле: 35 пикселей;
поле слева: 5 пикселей;
поле справа: 10 пикселей;

В чем разница между маржей и отступами?

• Заполнение - это пространство между границей и содержимым, в то время как поле - это пространство за пределами границы..

• Заполнение отделяет содержимое блока от границы. Маржа отделяет один блок от другого.

• Заполнение состоит из фоновых изображений и цветов фона, применяемых к контенту, в то время как поле не содержит такой.

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

Резюме:

Обивка против маржи

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

Изображения предоставлены:

1. Блочная модель CSS от Felix.leg (CC BY-SA 3.0)