@sergealmazov то, что мы видим — не важно. Потому что семантика работает не совсем так. Мы видим строку текста или ряд иконок, но семантически это список пунктов меню. Кнопки — это, простите, совсем другое меню, то, что получило тег menu в html5.
Связь галереи и моей логики я не увидел. Что касается превьюшек — часто так и верстается. Превью статей — да, но никак не статья. Статья — это чаще всего основной элемент страницы. Анонсы, последние новости и так далее — пожалуйста.
Ну и не забываем, что статья, фото, анонсы — это полноценные элементы страницы. Фотографии могут рассматриваться по отдельности, к каждой может быть прилеплен блок с комментариями. Для того и созданы элементы логической разметки, чтобы отделять одну статью от другой, один твит от другого.
Что касается навигации — мы видим абсолютно четкий перечень, объединенный как физически, так и по смыслу в один блок. Организация такого перечня исторически делается списком. И главное, говоря исторически, я подразумеваю не старый html4, а основу языка, то, ради чего этот шабаш затевался, а именно — логическая разметка текста и типографика.
Как верстается содержание в печатном издании? Тоже будете утверждать, что это не список, а набор несвязных элементов разметки? Так тогда вообще зачем использовать теги p, a, em, table. Давайте все верстать при помощи div и span.
На сей день появился новый тег, а именно nav. И именно его стоит использовать для навигации, но это не значит, что в него не надо включать список. Пример прост. Один блок навигации может включать несколько списков навигации, к примеру: навигация по страницам сайта и навигация по странице; или навигация по страницам сайта и быстрые ссылки. Вложенные nav? Для меня структура:
-nav
--nav
--nav
— совершенно не однозначна, имхо.
Список есть список. А так вся Ваша позиция напоминает случай, когда верстальщика так запугали, что верстать таблицами плохо, что он таблицу верстает divaми.
@Petroveg а все потому, что учить верстку стоит после того, как получается нормально сверстать документ в word. Странная позиция, при определении семантического значения того или иного участка текста опираться на какие-то там правила, которые сами основываются на правилах типографики.
@slowdream да, но это только альтернативное решение, а ответ на Ваш вопрос, в точности, как Вы спрашивали, дал @friogenn. border, как и inset box-shadow рисуется внутри блока, соответственно бордер-то просвечивает, но под ним у нас бэк блока.
@vohaha посмотрите внимательно мой пример и пример от @Petroveg
И внимательно изучите селекторы такие как ~, +, .parent .child
Потому что Вы явно плаваете в этом. Ваш блок с картинкой должен находиться, согласно css, внутри тега input. Естественно, он у Вас находится рядом с тегом input.
