Ответы пользователя по тегу Вёрстка
  • Как убрать лишние линии у текста и под изображениями?

    mizutsune
    @mizutsune
    Frontend Developer
    Немного информации по поводу верстки

    1. Обычно элементам даются осмысленные имена классов, а не всякие a01, a02, a03. Да. есть исключения, когда можно использовать префиксы и суффиксы, в стиле: Datacard-DGX3-VS2, но тут хотя бы видно что в целом в имени класса используется дополнительная сущность, в виде Datacard, что упрощает понимание.

    2. Для создания адекватной структуры страницы, многие блоки объединяются в родительские блоки, группы или контейнеры или секции. Это позволяет выстроить иерархию и логически связать элементы в группы.

    3. При верстке стандартной страницы, обычно используются базовые теги HTML - header, main, nav, footer и другие, внутрь которых можно вложить остальные элементы страницы. Такой подход к верстке, имеет достаточно плюсов, однако в вашей верстке я этого не вижу. У вас просто винегрет.

    4. Не стоит использовать вендорные префиксы, там где это не нужно. Речь идёт об этом - display: -webkit-inline-box. Плюс минус, но значения некоторых свойств конечно можно подправить, например убрать проценты у марджинов. Свойство transition обычно устанавливается в статичном состоянии, а не при :hover эффекте.

    5. Тег body и так по дефолту блочный... Зачем вы задаёте ему display: block? А ещё непонятно зачем для ссылок и некоторых других элементов прописаны повторы стилей. Зачем дублировать, когда можно для набора одинаковых элементов - создать единый селектор с набором необходимых стилей?

    6. Ещё у вас закрывающие теги </html> и </head> поменялись местами. Забавно.

    7. Я думаю что тег <div> абсолютно не подходит для использования в качестве кнопки, ведь для кнопок имеется вполне подходящий тег </button>.


    Ну, а теперь отвечу на основной вопрос:

    Как убрать лишние линии у текста и под изображениями?


    Эти полосы являются обычным пробелом. Он обычно стоит между inline или inline-block и соседними элементами. Для того чтобы избавиться от этих полос, оберните элементы в родительский блок и установите для него свойство display со значением flex/grid.

    Конечно есть множество других способов избавиться от этих пробелов, но вряд ли их использование будет полезно или удобно, ведь есть нормальные пути решения проблемы.
    Ответ написан
    Комментировать
  • Как лучше сверстать такой блок?

    mizutsune
    @mizutsune
    Frontend Developer
    Ответ написан
    Комментировать
  • Как такое сверстать?

    mizutsune
    @mizutsune
    Frontend Developer
    Такую раскладку блоков можно сделать например с помощью библиотеки masonry или поискать аналоги.

    Можно конечно и без библиотек сделать. Например вот статья в которой есть материал по этой теме.
    Ответ написан
  • Как выровнять картинку?

    mizutsune
    @mizutsune
    Frontend Developer
    Если правильно понял, то как-то так:

    Ответ написан
  • Как два совместить свойства background??

    mizutsune
    @mizutsune
    Frontend Developer
    .header {
       background: linear-gradient(180deg, #0d606f 0%, rgba(13, 96, 111, 0) 25.1%), 
                   url("ссылка_на_изображение.jpg") 0 0/100% 100% no-repeat;
    }
    Ответ написан
    1 комментарий