Решение проблем со схлопыванием
 

Внутренний абзац применяет внешнее поле в 150px. при этом он смещается вместе со своим предком https://jsfiddle.net/45bz4zq7/. Как избежать это, не применяя внутреннего поля родителю, и без присваивания границ? Какой метод наиболее верный в таких ситуациях?:help:

Для p тогда надо поставить display: inline-block;
Рекомендую к прочтению: https://html5book.ru/block-inline-elements/
Особенно про схлопывание :)

Спасибо, но, я на данном сайте прочитал следующее "Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу." Это как понимать? может статья устаревшая ?

Нет, статья не устаревшая. Согласно спецификации нельзя комбинировать блочные и строчные элементы внутри одного блока. Если же вы в блочный элемент впихнете и блочный и строчный элементы (не путать оба с inline-block), тогда браузеры прорисуют их по собственному желанию (этот момент спецификацией не регламентируется).

Т.е. так делать нельзя https://jsfiddle.net/toe0nkwc/? А какие последствия? В том что разные браузеры по разному их отобразят?:blink:

Вы хотите пообсуждать спецификацию? :)
Я не знаю о последствиях, я только знаю что желательно все делать по правилам.

Прочтите, там доступно все описано. В пункте 3.2.4.1 есть красивая схемка, которая иллюстрирует как все должно работать.
https://www.w3.org/TR/2014/REC-html5...nt-definitions