Задать вопрос
@greenline111
html

Как убрать отступ?

Как мне решить проблему, после использования повторного
<div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>

Появляется отступ на всю страницу5fa034cf6721b479419176.png

<!DOCTYPE html>
<html>
<head>
    <style>
        .blocks-catalog {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            position: fixed;
        }
        .catalog-brand___logo {
            min-width: 80px;
            width: 80px;
            border: 1px solid #d5d5d5;
            -webkit-border-radius: 5px;
                    border-radius: 5px;
            height: 32px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
                -ms-flex-pack: center;
                    justify-content: center;
            margin-right: 15px;
            padding: 5px; }
        .blocks-catalog .catalog-brand___logo {
            width: 45px;
            margin-top: 5px;
            min-width: 45px;
            padding: 3px;
            margin-right: 10px;
            height: 18px;
            -webkit-border-radius: 2px;
            border-radius: 2px; }

        .catalog-brand__img {
            height: auto;
            max-height: 100%;
            max-width: 100%; }
        .catalogs_blocks {
            margin-left: 12px;
        }

    </style>
</head>
<body>
    <div class="blocks-catalog">
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
        <div class="catalogs_blocks">
            <div class="catalog-brand__letter">A</div>
            <div class="catalog-brand__item">
                <div class="catalog-brand___logo"><img class="catalog-brand__img" src="logo-1.png" alt="alt"></div>
                <div class="catalog-brand__title"><a class="link" href="#">Лампы для проекторов Acer</a></div>
            </div>
        </div>
    </div>
</body>
</html>
  • Вопрос задан
  • 149 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Используйте css columns
https://jsfiddle.net/ezxpw42o/
Либо grid
Либо скрипты типа masonry
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@Kostya10295
Он появляется из-за того ваш первый блок выше других. Соответственно главная ось заполнена и новая ось начинается с новой «строки». Если вы хотите заполнить свободное место при этом первый элемент выше других - используйте гриды
Ответ написан
6 комментариев
6 комментариев
Sergomen
@Sergomen
Просто делай добро и оно вернётся 
.catalog_blocks{
/* ваши стили */
   display: inline-block
}
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы