Кто-нибудь может мне объяснить, почему лезут всякие глупости в процессе прохождения?
Вот шаг 5/18. Я раскомментировала разметку - и все сразу съехало. Почему? Что ему мешает стоять ровно в этот момент? После того, как display задаешь - все встает рядом.
И почему я вижу между иконками хвостики?
Спасибо ))
Это происходит из-за дополнительной обертки у ul (header, footer). Без группировки нарушается структура таблицы - контейнер>строка>ячейка.
Хвостики. как и полочки сделаны на css, который вы не видите в нижнем редакторе. Но этот код можно посмотреть через инструменты разработчика в браузере (открываются нажатием клавиши F12)
Это же все блочные элементы, хоть и в обертках многослойных. Я не понимаю, откуда берется вот этот промежуток между первой иконкой и остальным, хотя я разметкой влияю на блок в целом, без отдельных элементов. Не было footer’а - и вдруг появился. При этом разъехался. И заодно вместе с ним разъехался и header
вот и при сборке промежуточного испытания - после того, как обозначила таблицу вдоль и поперек, но до стилизации - это поле справа от первой иконки появляется
Скорее всего механизм такой:
Браузер, благодаря .checklist { display: table; } понимает, что имеет дело с таблицей, внутри которой предположительно будут располагаются строки table-row и ячейки table-cell, но точно что есть что он узнает только когда мы явно задаем им это через display.
Если внутри табличной разметки браузер находит блок (обязательно блок) для которого явно не задано отображение table-row или table-cell, то по умолчанию он отображает его как простейший элемент таблицы (по аналогии с тем, что не размеченный заголовок, к примеру, отображается как простой текст). А простейший элемент таблицы - ячейка.
Далее - 1) по умолчанию ширина ячеек зависит от содержимого и 2) все ячейки в одном столбце одной ширины. Поэтому появившаяся безымянная “ячейка” растягивает весь первый столбец. После задания стилизации, браузер понимает, что это “строка” и вместо всего footer считает ячейкой в первом столбце лишь footer > ul > li.
Но, что еще интересно, если “безымянные” элементы не являются блоками, то за ячейку будут приняты все элементы, и даже перенос строки будет воспринят как просто перенос текста внутри ячейки.
И еще - даже если убрать обертку footer, но при этом не применять стилизацию к конкретному ul, то браузер все равно сочтет его ячейкой. Без явно задания display: table-row он не будет воспринимать вложенные элементы (li) как ячейки.
