Блочные и строчные элементы

Всем добрый вечер и меня озадачила такая ситуация. Есть блочные и строчные элементы. Блочные элементы нельзя вкладывать в строчные то есть <span><div></div></span> - запрещено. Блочные элементы можно вставлять в блочные и в блочные можно вставлять строчные. А что если я строчному элементу, который будет находиться непосредственно в строчном элементе задам display: block;. Получается, что наш внутренний строчный элемент стал блочным. Такое поведение допускается? <span><a href="" style="display: block;"></a></span>

0

Сообщение от Freeze_Breeze А что если

А это легко проверить

0

Freeze_Breeze, Дам вам ссылку на статью одну с бородой =>ТЫК<= Но перед тем как начать читать ее, взгляните на код.
Он абсолютно валиден. В так называемом "блочном" div-е лежит самый обыкновенный текст. А в "строчном" span-е -- картинка(блок). Вот вам ссылка на валидатор, удостоверьтесь сами. =>ТЫК<=

Пруф

Миниатюры

 

0

Qwerty_Wasd, ваше доказательство не доказательство Хоть в спецификации и указано, что IMG это строчно-блочный элемент, но в браузере он отображается как строчный. Да и в любом случае, вопрос темы о том, можно ли вкладывать блочные элементы в строчные.
И тут дело даже не в валидности кода, а дело в том, что код ведет себя при этом всем, мягко говоря, не очень.

0

mrtoxas, можете ткнуть меня лицом по этой ссылке на W3C где указано

Сообщение от mrtoxas что IMG это строчно-блочный элемент

?

0

img строчный элемент

0

Да, чуть не то написал. Строчный, но ведет себя как строчно-блочный.
Но будь он строчным или блочно-строчным, вложение его в строчный элемент не нарушает никаких правил. И на странице эти элементы будут отображаться нормально, что не скажешь о блочном элементе, вложенном в строчный.

0

Qwerty_Wasd, хорошо, спасибо за ссылку я обязательно ее прочту, но дело в том, что браузеры давно опускают такое поведение и не считают его ошибкой, но поведение элементов иногда может вводить в смятение. Тоже самое скажу про Java Script, который тоже может может не показать ошибки в браузере, но ошибка будет и из за этого код не будет выполняться. Хотя браузер ни какой ошибки не показывает, то есть браузер опускает различного рода ошибки как я описал в теме. Но они существуют и им есть место быть.

0

mrtoxas,Freeze_Breeze, изучая стандарт, первое что приходится усвоить, что структура DOM формируется по принципу от "большого к малому". Логика этой структуры состоит в том, что глупо пихать большой контейнер в малый. Поэтому валидатор не рекомендует, подчеркиваю не рекомендует это делать. Так как логика страницы будет нарушена. Ни в одном абзаце стандарта W3C нет слов строчный элемент\блочный элемент. Есть несколько тематических групп. Кто-то может перевел название одной из них Phrasing content, куда входит img, как "строчные элементы"? Видимо гугл-переводчиком?

0

Qwerty_Wasd, после ваших сообщений у меня сложилось впечатление, что вы не в браузере верстаете, а в спецификации. Я понимаю, что вы хотите сказать, но как можно рассматривать элементы html в браузере в полном отрыве от css?

Элементы отображаются в браузере как строчные, блочные, строчно-блочные. Если вы приводите пример с картиной и говорите, что она блочная, то это не так. У этой картинки есть определенные стили и изначально она строчная или инлайновая - тут уже кто как привык.

Сообщение от mrtoxas Хоть в спецификации и указано, что IMG это строчно-блочный элемент

Все такие не перепутал этот момент.

Typical default display properties img { display: inline-block; } http://w3c.github.io/html-refe... mg-display

В примере Freeze_Breeze - <span><div></div></span> - браузер выводит span как строчный, а div как блочный. И валидатор выводит не предупреждение, а конкретную ошибку

Error: Element div not allowed as child of element span in this context.

И ясно, что это не из за стилей каких-то, а из за

Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

Но вот большинство phrasing content элементов, которые попадают под это являются строчными - b, span и т.п. и если поместить в них не phrasing content элементы, которые браузер видит блочными, валидатор об этом скажет ошибкой. Вот и получается запрет блочных элементов, вложенных в строчные, которого как бы нет.
В html4 с этим было проще, было две категории "block level" and "inline elements", причем, последний не мог содержать block level элементы, вот отсюда и пошел этот запрет на вложенность.

Насчет примера <span><a href="" style="display: block;"></a></span>.
Конкретного запрета на размещение блочных(display:block) элементов в строчных(display:inline) - нет, а в спецификации, описывается и этот момент и то, к чему приведет такое размещение, причем, не с логической точки зрения, а конкретно то, как поведут себя элементы на странице. Я выше написал, что поведут они себя не очень и даже привел пример.
Если на это смотреть с точки зрения валидатора, то я не понимаю, как он вообще может не пропустить такой код, html-валидатору глубоко одинаково что там творится в стилях.

0

Уважаемый Qwerty_Wasd, по моему вы бред написали, а вот с mrtoxas полностью согласен, все правильно сказано.

0

Freeze_Breeze, на самом деле, нет, не бред. Мы c Qwerty_Wasd, скорее всего, по-разному поняли вопрос этой темы и с разных сторон это все описали. Qwerty_Wasd прав в том, что в html5 нет разбиения на строчные и блочные элементы, как было в html4.
Вот, что пишет на эту тему MDN:

В целом, строчные элементы могут содержать только данные и другие строчные элементы. ... Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы. ... Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 это двоичное различие заменено более сложным набором категорий контента. Категория «блоков» примерно соответствует категории основного потока в HTML5, а «строчные» элементы аналогичны текстовому контенту. Кроме того, есть и другие категории.

Не все так просто и однозначно.

0

Freeze_Breeze,

Сообщение от Freeze_Breeze по моему вы бред написали

аргументировать сможете? Или вы так отметились?
mrtoxas, мне кажется наш диалог пошел не потому руслу. Я упирал на то, что у вас технически, перевод документации не совсем верен. Из-за этого теряется суть, которую она(документация) пытается донести. Например

Сообщение от mrtoxas phrasing content

это не строчные элементы, а "Выражения". И inline в контексте документации это не "строчный", а "встроенный(в строю, в ряду)", то есть малый контейнер. Block в контексте документации читается как "массив"\большой контейнер. Он и состоит из малых, следуя принципу

Сообщение от Qwerty_Wasd от "большого к малому"

. Поэтому валидатор укажет на ошибку Поэтому что

Сообщение от mrtoxas Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

- "большинство выражений могут содержать в себе только выражения, но не поток(потоковые сущности)"
Теперь что касается CSS, язык описания был создан для того, чтобы сделать жесткий каркас стандарта более гибким, управляемым. К примеру и вот у нас не phrasing content element, а flow content element с соответствующим поведением.
Теперь надеюсь вы правильно меня поймете. И при этом, Freeze_Breeze, я уважая других участников форума, не попираю их право на собственное мнение, называя их мысли бредом. Скорее всего, mrtoxas, не разделит мои мысли, что вполне понятно. Далее спор продолжать не буду, ибо он бесконечен, как и кол-во мнений. Жду ваших замечаний на мое сообщение и хотел бы с вашего, Freeze_Breeze, mrtoxas, позволения откланяться.

Добавлено через 58 секунд
блин пока писал и вы mrtoxas тоже. Успели раньше))

0

Сообщение от Qwerty_Wasd Скорее всего, mrtoxas, не разделит мои мысли, что вполне понятно. Далее спор продолжать не буду, ибо он бесконечен

Не в разделении мыслях дело, а в том, что я вам про теплое, а вы мне про мягкое. Или наоборот

0

mrtoxas, Да нет )) Мы с вами об одном и том же. Только вот перевод документации у нас разный. И потому мы по разному с вами понимаем - как строится DOM.

0

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

и вот у нас не phrasing content element, а flow content element

И вот у нас не строчный, а блочный элемент.
И вот у нас не inline, а block элемент.

большинство выражений могут содержать в себе только выражения, но не поток(потоковые сущности)

Большинство строчных элементов могут содержать в себе только строчные элементы, но не блочные.
Большинство inline элементов могут содержать в себе только inline элементы, но не block.

Какая же потрясающая разница.

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

1

Задал самый обычный вопрос, а срачь развели на три страницы, за то когда пишешь реальную проблему, никто не ответит... Только и видишь по 80 просмотров темы, а ответов 0... Программисты от Бога блин...

0

Freeze_Breeze,

Никогда не думайте и не надейтесь, что вам должны ответить. Вы получите ответ на свой вопрос, если вы его заслужили, задав значимый, интересный и наводящий на размышления вопрос — вопрос, неявно дающий сообществу новый опыт, а не просто пассивно требующий от других поделиться знаниями. Как правильно задавать вопросы

0

mrtoxas я все понял, мои вопросы не достаточно интересны и я не заслужил ответа на них. За то про строчные и блочные элементы развели....

Добавлено через 11 секунд
Закройте пожалуйста тему!

0