Странное поведение тега P

[Evkaky]

Простейший пример:

<p id="one">
    ololo
    <span>SSSS</span>
    <div id="ib">IB</div>
</p>

#one {
    padding: 30px;
    background: #deb887;
}

#ib {
    display: inline-block;
    border: 1px solid red;
}

http://jsfiddle.net/tQ9DM/

О ужас. Элемент <div id="ib">IB</div> почему-то "выпадает" из своего родителя <p id="one">. Если родительский тег Р заменить на div - то всё нормально будет.

Это уже ни в какие рамки. Или мир вёрстки начал сходить с ума.

Как так? Почему?

[SelenIT]

почему-то "выпадает" из своего родителя <p id="one">

...родителя ли? Что показывает инспектор?

Как так? Почему?

Content model: Phrasing content. Внутри абзаца допустим только текст (то, что по-старому называлось «строчные элементы»). Плюс

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, dir, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, menu, nav, ol, p, pre, section, table, or ul, element...

Никогда не думайте о <p> как о контейнере — он на это не рассчитан!

[Evkaky]

Нежданчик.

Получается, внутри тега <p> могут быть только текст и элементы, которые строчные (display: inline) по своей природе.

Т.е. нельзя сделать, допустим h1 строчным, через display: inline и засунуть его внутрь <p>.

Даже строчно-блочне элементы внутрь <p> нельзя пихать.

А есть еще такие теги-сюрпризы, которые по своей природе блочные (как и <p>) но внутри них тоже не будут отображаться другие блочные, строчно-блочные эелементы, даже если им прописать display: inline

?

[lexxcode]

вообще-то ответы на ваши вопросы есть в спецификации и ничего странного в этом всем нету

[Evkaky]

А есть еще теги с таким не странным поведением?

Я слышал, что в тегах <h1>...<h6> внутри не может быть других блочных тегов. Только что проверил - могут.

[SelenIT]

Т.е. нельзя сделать, допустим h1 строчным, через display: inline и засунуть его внутрь <p>.

«Природа» (в смысле, Content model) элементов в общем случае никак не связана с их display. «Природа» проявляется при парсинге в DOM, а display и прочий CSS применяется к уже готовой DOM и задним числом ничего в ней изменить не может. Вообще пора отучаться оперировать «блочными» и «строчными» элементами (тем более «тегами») — в актуальной спецификации их нет. Есть структурные, текстовые, интерактивные и т.п. элементы. А блочное, строчное, строчно-блочное, табличное и т.п. — это типы отображения любых из них в CSS.

Только что проверил - могут.

Но не должны. Как и в dt с address (в каких-то старых браузерах неподобающее содержимое из них тоже вываливалось, сейчас этого не происходит, т.к. у них нет такого условия неявного закрытия, но полагаться на противоестественную DOM-структуру всё равно не стоит).