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

[Aqua77]

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

[TestUser013]

Для p тогда надо поставить display: inline-block;

Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding, но если для элемента задан фон, он будет распространяться на верхний и нижний padding, заходя на соседние строки текста.

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

[Aqua77]

Для p тогда надо поставить display: inline-block;


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

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

[TestUser013]

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

[Aqua77]

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

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

[TestUser013]

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

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