каково различие между дополнением и полем?

Я рекомендую вам эту статью. Схема взята из той статьи.

http://elegantcode.com/2010/01/26/css-basics-the-box-model/

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

См. блочную модель CSS для пояснения.

Хорошо, в некоторых из этих ответов используется запутанная терминология и они неверны.

Ширина элемента css не включает отступы, границы или поля.

Поэтому неточно говорить «заполнение внутри элемента».

Правильно сказать, что «заполнение находится внутри границы элемента» и «поле находится за пределами границы элемента».

Чтобы вычислить, сколько места занимает блок (например, только по горизонтали):

horiz. space = width + 2(padding) + 2(border) + 2(margin)

Меня беспокоит, когда люди говорят «заполнение - это пространство внутри элемента», потому что: у элемента есть заполнение, у него есть граница и у него есть маржа. Все этого материала находятся за пределами ширины содержимого элемента и должны учитываться при вычислении того, сколько места занимает элемент.

Если вы говорите «заполнение внутри элемента», то вы совершаете ту же ошибку, которую совершила MSIE в своей модели с разбитым блоком, что доставляет неисчислимым веб-дизайнерам множество головных болей.

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

заполнение - это часть ширины элемента. маржа находится снаружи и не является частью ширины

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

http://redmelon.net/tstme/box_model/