Задать вопрос
@ivanovcoder
верстка

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

<?php
include 'sourc/base/base.php';
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Name RolePlay - Сайт</title>
    <link rel="stylesheet" href="sourc/styles/style.css">
</html>
<body>
    <a class="a01" href="">ГЛАВНАЯ</a>
    <a class="a02" href="">НОВОСТИ</a>
    <a class="a03" href="">ПОМОЩЬ</a>
    <a class="a04" href="">ДОНАТ</a>
    <a class="a05" href="">ФОРУМ</a>
    <a class="a06" href="">КАБИНЕТ</a>
    <div class="upblocktext">
        <p class="text01">НАЧАТЬ ИГРАТЬ</p>
    </div>
    <p class="g01">NAME ROLEPLAY</p>
    <p class="g02">Атмосферная онлайн-игра про современную Россию с <br>безграничными возможностями, множеством развлечений, <br>свободным и открытым миром</p>
    <div class="blockyadis">
        <p class="text02">СКАЧАТЬ ЛАУНЧЕР</p>
    </div>
    <br><img class="i01" src="sourc/img/icon01.png"></br>
    <p class="p01">ГОЛОСОВОЙ ЧАТ</p>
    <img class="img01" src="sourc/img/max.jpg" draggable="false">
    <img class="img02" src="sourc/img/max.jpg" draggable="false">
</body>
</head>


CSS стили

body{
    padding: 0;
    margin: 0;
    background: rgb(70, 70, 70);
    display: block;
}
.upblocktext{
    width: 160px;
    height: 37px;
    text-align: center;
    border-radius: 3px;
    margin-left: 10%;
    margin-top: 10%;
    background-color: rgb(89, 92, 252);
    cursor: pointer;
    user-select: none;
}
.text01{
    display: -webkit-inline-box;
    font-size: 15px;
    font-family: Proxima Nova,sans-serif;
    color: #FFF;
    margin-top: 9px;
    user-select: none;
}
.text02{
    display: -webkit-inline-box;
    font-size: 15px;
    font-family: Proxima Nova,sans-serif;
    color: #fff;
    margin-top: 13px;
    user-select: none;
}
.img01{
    pointer-events: all;
    display: inline-block;
    margin-top: 40%;
    margin-left: 25%;
    width: 250px;
    border: 2px solid #fff;
    border-radius: 10px;
    user-select: none;
}
.img02{
    pointer-events: all;
    display: inline-block;
    margin-top: 40%;
    margin-left: 14%;
    width: 250px;
    border: 2px solid #fff;
    border-radius: 10px;
    user-select: none;
}
.blockyadis{
    width: 200px;
    height: 45px;
    background-color: rgb(89, 92, 252);
    margin-left: 40%;
    margin-top: 10%;
    border-radius: 20px;
    animation-name: rgbtext;
    animation-duration: 1s;
    text-align: center;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    cursor: pointer;
}
@keyframes rgbtext {
    0%{
        background-color: rgb(89, 92, 252);
        transition: 0.3s;
    }
    10%{
        background-color: rgb(73, 73, 73);
        transition: 0.3s;
        width: 200px;
    }
    20%{
        background-color: rgb(73, 73, 73);
        transition: 0.3s;
        width: 230px;
    }
}
.a01{
    display: -webkit-inline-box;
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-top: 40px;
    margin-left: 30%;
    text-decoration: none;
}
.a01:hover{
    transition: 0.3s;
    color: rgb(185, 185, 185);
}
.a02{
    display: -webkit-inline-box;
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-top: 40px;
    margin-left: 3%;
    text-decoration: none;
}
.a02:hover{
    transition: 0.3s;
    color: rgb(185, 185, 185);
}
.a03{
    display: -webkit-inline-flex;
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-top: 40px;
    margin-left: 3%;
    text-decoration: none;
}
.a03:hover{
    transition: 0.3s;
    color: rgb(185, 185, 185);
}
.a04{
    display: -webkit-inline-flex;
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-top: 40px;
    margin-left: 3%;
    text-decoration: none;
}
.a04:hover{
    transition: 0.3s;
    color: rgb(185, 185, 185);
}
.a05{
    display: -webkit-inline-flex;
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-top: 40px;
    margin-left: 3%;
    text-decoration: none;
}
.a05:hover{
    transition: 0.3s;
    color: rgb(185, 185, 185);
}
.a06{
    display: -webkit-inline-flex;
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-top: 40px;
    margin-left: 28%;
    text-decoration: none;
}
.a06:hover{
    transition: 0.3s;
    color: rgb(185, 185, 185);
}
.i01{
    pointer-events: all;
    display: block;
    width: 60px;
    margin-left: 20%;
    margin-top: 5%;
    user-select: none;
}
.p01{
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-left: 250px;
    display: block;
}
.g01{
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-left: 11%;
}
.g02{
    color: #fff;
    font-size: 13px;
    font-family: Proxima Nova,sans-serif;
    margin-left: 11%;
}



633dca73977b1778446039.png
  • Вопрос задан
  • 94 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
mizutsune
@mizutsune
I will live forever in the flame of your eyes.
Немного информации по поводу верстки

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.

Конечно есть множество других способов избавиться от этих пробелов, но вряд ли их использование будет полезно или удобно, ведь есть нормальные пути решения проблемы.
Ответ написан
Комментировать
Комментировать
@roman_vo
у вас же у текста ссылки, ссылки всегда по умолчанию с подчеркиванием, убрать через css: a {text-decoration: none;}.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Senior Frontend Developer / Старший разработчик Vue.js
Webbankir
До 350 000 ₽
Frontend Developer (Nuxt/Tailwind)
ИП Раковский
До 150 000 ₽
Frontend Developer
Redberries.pro
от 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Изменить код STM32 и конфигурацию сервиса удаленного доступа
25 нояб. 2024, в 08:57
5000 руб./за проект
Доработать готовый проект по миниатюризации компактного НО
25 нояб. 2024, в 08:40
10000 руб./за проект
Восстановить работу связки парсер и Telegram bot на сайте Wordpress
25 нояб. 2024, в 08:28
8000 руб./за проект
Ещё заказы