Элементы уровня блока внутри встроенных элементов

Валидатор W3C говорит мне, что я не могу поместить элементы уровня блока внутри встроенных элементов. Имеет смысл...

но что, если я использую CSS для изменения этого элемента уровня блока в встроенный элемент?

И что, если я использую CSS для преобразования встроенного элемента в элемент уровня блока (когда внутри другого встроенного элемента)?

Валидатор не понимает это явно, но не так ли?

(Я на самом деле не делаю этого, мне просто интересно узнать о лучшей практике)

Ответ 1

Элемент, определенный как элемент блока в спецификации HTML, не совпадает с элементом, определенным как display: block; в CSS.

С этим я имею в виду: даже если вы скажете <p style="display: inline;">Lorem...</p>. <p> по-прежнему будет блочным элементом в глазах HTML.

HTML, CSS и JavaScript, если используются правые, имеют свободную связь друг к другу и что они не должны зависеть от другого и что отсутствие одного не должно заставить других (или систему в целом) потерпеть неудачу.

Ответ 2

Элемент, который является встроенным элементом, не должен содержать элементы блока. Элементы блока могут содержать блок и/или встроенные элементы, в то время как встроенные элементы могут содержать только другие встроенные элементы (включая inline-block, такие как <img>).

Конечно, вы можете это сделать, так как графическое представление будет довольно согласованным между браузерами. Это все еще не то, что я бы рекомендовал, но и не могу думать о причине, чтобы сделать это.