Вход

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

Aqua77
06.02.2017, 20:39
Внутренний абзац применяет внешнее поле в 150px. при этом он смещается вместе со своим предком https://jsfiddle.net/45bz4zq7/. Как избежать это, не применяя внутреннего поля родителю, и без присваивания границ? Какой метод наиболее верный в таких ситуациях?:help:
TestUser013
06.02.2017, 21:04
Для p тогда надо поставить display: inline-block;
Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding, но если для элемента задан фон, он будет распространяться на верхний и нижний padding, заходя на соседние строки текста.

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


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

Спасибо, но, я на данном сайте прочитал следующее "Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу." Это как понимать? может статья устаревшая ?
TestUser013
12.02.2017, 22:54
Нет, статья не устаревшая. Согласно спецификации нельзя комбинировать блочные и строчные элементы внутри одного блока. Если же вы в блочный элемент впихнете и блочный и строчный элементы (не путать оба с inline-block), тогда браузеры прорисуют их по собственному желанию (этот момент спецификацией не регламентируется).
Aqua77
12.02.2017, 23:11
Нет, статья не устаревшая. Согласно спецификации нельзя комбинировать блочные и строчные элементы внутри одного блока. Если же вы в блочный элемент впихнете и блочный и строчный элементы (не путать оба с inline-block), тогда браузеры прорисуют их по собственному желанию (этот момент спецификацией не регламентируется).

Т.е. так делать нельзя https://jsfiddle.net/toe0nkwc/? А какие последствия? В том что разные браузеры по разному их отобразят?:blink:
TestUser013
13.02.2017, 19:12
Вы хотите пообсуждать спецификацию? :)
Я не знаю о последствиях, я только знаю что желательно все делать по правилам.

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