Поля и отступы могут сбивать с толку, потому что в некотором смысле они кажутся одним и тем же: пустое пространство вокруг изображения или объекта. Вот что вам как веб-дизайнеру нужно знать об их различиях.
Заполнение
Заполнение - это пространство между изображением или содержимым ячейки и его внешней границей. На изображении ниже отступ - это желтая область вокруг содержимого. В этом случае отступы полностью охватывают содержимое: сверху, снизу, справа и слева. Вы можете указать количество отступов (в процентах, пикселях, точках и т. д.) для каждой стороны, и они не обязательно должны быть одинаковыми. Таким образом, вы можете расположить контент внутри элемента.
Поля
Напротив, поля - это пробелы за пределами границы элемента, между элементом и всем, что к нему примыкает. На изображении поле - это белая область за пределами всего объекта. Как и отступы, поля в этом примере полностью охватывают содержимое: сверху, снизу, справа и слева. Вы можете использовать поля для позиционирования div и других элементов на странице.
Всегда проверяйте свои страницы в различных браузерах, операционных системах (включая мобильные) и размерах экрана, чтобы убедиться, что они отображаются именно так, как вы хотите.