Немного не понятно, почему высота ячейки составляет 54 пикселя, в то время как высота изображения внутри - 50 пикселей.
Вот только разметил css-таблицу
article {
display: table;
}
ul {
display: table-row;
}
li {
display: table-cell;
}
и получаем вот это
хотя на самом деле 1-я и 2-я строки должны прилипать друг к другу.
Я ошибаюсь?
Если зададите вертикальное выравнивание для картинок, то будет прилипать.
а можете объяснить, почему?
вот например здесь https://htmlacademy.ru/courses/86/run/14 если убрать весь лишний код и оставить только
.striped-layout article {
display: table;
}
.striped-layout h1 {
display: table-caption;
}
.striped-layout ul {
display: table-row;
}
.striped-layout li {
display: table-cell;
}
то всё отображается как надо.
Мне нравится ваше стремление докопаться до истины.
Лишние пиксели - это так называемые “пробелы” в коде.
О них рассказывается здесь.
Во втором задании, где вы отмечаете, что всё отображается правильно, в коде кроме файла стилей, в котором вы работаете, подключен еще один. В консоли это видно. Во втором файле стилей для пунктов li обнулен размер шрифта (один из приемов борьбы с пробелами).
Аааа, из-за того, что img - инлайновый элемент? ох, всё время забываю про это…
Спасибо огромное!
