Победа над неочевидным. Схлопывание внешних отступов

Вы бы добавили ссылок на jsfiddle.net, например, хотя бы. И перепроверили всё написанное там в действии перед постом.

Например, в последнем случае у вас там явная каша и никакой логики:
Судя по всему, первый блок стилей должен применяться ко всем блокам, а ещё там точки с запятой не хватает. Кроме того, никакого суммирования там нет и не будет, поскольку верхний отступ родительского блока совершенно логично суммируется с нулевым отступом первого блока и совершенно логично не суммируется с отступом в 40px второго вне зависимости от наличия границ у родителя.

Есть идейка, чтобы и дизайнеры прочувствовали эти правила (подавляющее большинство и не слышало про это явление), сделать им плагин для Photoshop, который будет после указания полей и типа блока добавлять скрытый полупрозрачный слой в группу с элементом. Тогда будет неимоверно легко как и верстальщику верстать весь набор элементов, так и дизайнеру делать макеты на базе готовых компонентов.
Только вот не умею плагины делать.
Был бы крутой плагин, как, например, PNG Express и т.п.

Можете объяснить следующее поведение?
Если взять последний пример и поставить margin-left: 20px; у parent, то outside сдвигается влево на 20px, а parent и daughter остаются на месте.

*Исходный код примера

border при всём желании нельзя назвать полем. Рамка, граница, но никак не поле же.