Поля на внешней стороне, прокладки на внутренней стороне относительно границы. Очевидно, что если у вас есть что-то вроде фонового изображения и текста, и вы хотите, чтобы текст располагался между краем изображения bg, вы использовали бы отступы. То же самое с границами.
Если вам нужно пространство снаружи, а также пространство между изображениями border / bg, вы должны использовать поля.
Если вы не делаете ничего, что является сложным для проектирования, тогда это не должно иметь большого значения, но вы должны обратить внимание на то, что происходит свертывание полей, если у вас есть элементы, расположенные до или после с вертикальными полями, и вы задаете поля значения рухнут, иногда вы можете использовать отступы для навигации по этому.
Если вы зададите для #one и #two ширину 200 пикселей, #one займет 240 пикселей без учета горизонтальных границ, поскольку он имеет отступ в 20 пикселей по горизонтали.
Движок рендеринга IE5 и режим причуд IE6 / IE7 некорректно отображают правильное количество пространства, если вы укажете горизонтальное заполнение и ширину, width:100px; padding:20px; заставит блок фактически занимать 100 пикселей ширины, вместо того, чтобы фактически быть 140 пикселями как и должно быть правильно.
Еще одна ошибка, на которую следует обратить внимание, - ошибка с двумя полями; если у вас есть элемент с плавающей точкой и поле в том же направлении, что и у объекта с плавающей точкой, например, float:left;margin-left:100px;, он случайно удваивается. Это исправлено добавлением display:inline;, что заставляет его просто иметь 100px вместо 200px слева.
Я замечаю, что вы задаете много вопросов, на которые можно было бы ответить, просто прочитав приличную книгу переднего плана - рассматривали ли вы чтение:
Те, вероятно, ответят на многие ваши вопросы ...