Маржа против заполнения
Разница между полями и отступами является важным аспектом в CSS, поскольку поля и отступы - это две важные концепции, используемые в CSS для обеспечения расстояния между различными элементами. Отступы и поля не являются взаимозаменяемыми и имеют разные цели, поэтому должны использоваться надлежащим образом. Отступ - это пространство между содержимым и границей блока. С другой стороны, поле - это пространство за пределами границы блока. Поле отделяет блоки от соседних блоков, а заполнение отделяет границу от содержимого.
Что такое Padding?
В CSS (каскадных таблицах стилей) заполнение - это пространство между содержимым и границей. Он отделяет содержимое блока от его края. Отступы прозрачные и также включают фоновое изображение или цвет фона элемента. Величина заполнения элемента указывается с помощью термина «заполнение» в коде CSS. Например, чтобы добавить отступ 25 пикселей вокруг содержимого, можно использовать следующий код.
div {
ширина: 300 пикселей;
высота: 300 пикселей;
отступ: 25 пикселей;
граница: сплошная 25 пикселей;
}
При необходимости можно отдельно указать разные значения заполнения для левого, правого, верхнего и нижнего. Следующий фрагмент кода определяет разные значения заполнения для каждой стороны.
div {
ширина: 300 пикселей;
высота: 300 пикселей;
padding-top: 25 пикселей;
padding-bottom: 35 пикселей;
отступ слева: 5 пикселей;
отступ справа: 10 пикселей;
граница: сплошная 25 пикселей;
}
Что такое маржа?
В CSS (каскадных таблицах стилей) поле - это пространство за пределами границы. Он отделяет блок от других блоков. Поле также прозрачное, но большая разница с заполнением состоит в том, что поле не включает фоновые изображения или цвета фона, примененные к элементу. Размер маржи в CSS указывается с помощью термина «маржа». В следующем фрагменте кода вокруг блока div применяется поле размером 25 пикселей.
div {
ширина: 320 пикселей;
высота: 320 пикселей;
граница: сплошная 5 пикселей;
маржа: 25 пикселей;
}
Также могут быть указаны разные значения для разных сторон блока. В следующем фрагменте кода для каждой стороны применяются разные значения маржи.
div {
ширина: 320 пикселей;
высота: 320 пикселей;
граница: сплошная 5 пикселей;
маржа сверху: 25 пикселей;
нижнее поле: 35 пикселей;
маржа слева: 5 пикселей;
поле справа: 10 пикселей;
}
В чем разница между Margin и Padding?
• Padding - это пространство между границей и содержимым, а margin - это пространство за пределами границы.
• Заполнение отделяет содержимое блока от границы. Поле отделяет один блок от другого.
• Отступ состоит из фоновых изображений и цветов фона, применяемых к содержимому, в то время как поля не содержат такого содержимого.
• Поля соседних блоков могут перекрываться, при этом заполнение не перекрывается.
Резюме:
Отступ против поля
Заполнение - это пространство внутри границы блока, которое отделяет границу от содержимого. Поле - это интервал за пределами границы, отделяющий блок от соседних блоков. Еще одно отличие состоит в том, что отступы включают фоновое изображение и цвета фона, применяемые вокруг содержимого, а поля не содержат их. Поля соседних блоков могут иногда перекрываться, когда браузер отображает страницу, но с заполнением такого не произойдет.
Изображения любезно предоставлены:
