MenCeV

Спасибо большое. А такой вопрос, можно ли это сделать с помощью display : inline-block? Просто в интернете видел, что с помощью него делают, вот интересно, почему у меня не получается.

Прикрепляю изображение результата(бордеры для наглядности). Все отступы убраны, в браузере не отображаются. Так же прикрепляю класс, который присваиваю <li> и html код. .conteiner-blocks{ padding: 0; margin: 0; border: solid; border-width: 0; width: 572px; height: 505px; list-style-type: none; display: inline-block; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px; } <li class="conteiner-blocks conteiner-blocks-line"> <img src="img\intro.png" alt="" class="block-image"> <div class="block-text"> <p class="block-title">Введение</p> <p class="text">Как работают сайты. Верстка</p> <p class="text">Возможности HTML, CSS, JS</p> <p class="text">Редактор кода. Codepen</p> <p class="text">Работа с DevTools</p> <p class="number">01</p> </div> </li> <li class="conteiner-blocks"> <img src="img\base-html.png" alt="" class="block-image"> <div class="block-text"> <p class="block-title">Базовый HTML</p> <p class="text">Базовые теги</p> <p class="text">Теги картинок и ссылок</p> <p class="text">Теги таблиц</p> <p class="text">Служебные теги</p> <p class="text">Кодстайл HTML</p> <p class="number">02</p> </div> </li> <li class="conteiner-blocks conteiner-blocks-line"> <img src="img\base-css.png" alt="" class="block-image"> <div class="block-text"> <p class="block-title">Базовый CSS</p> <p class="text">Подключение CSS</p> <p class="text">Вес селектора</p> <p class="text">Свойство display</p> <p class="text">Блочная модель и позиционирование</p> <p class="text">Кодстайл CSS</p> <p class="number">03</p> </li> <li class="conteiner-blocks"> <img src="img\layout.png" alt="" class="block-image"> <div class="block-text"> <p class="block-title">Работа с макетом</p> <p class="text">Про форматы изображений</p> <p class="text">Работа с макетом в Photoshop</p> <p class="text">Работа с макетом в Figma</p> <p class="number">04</p> </li> </ul> Вот код.

Если так сделать, то все 4 элемента встают в один ряд, а мне нужно 2 ряда

Сделал горизонтальные элементы списка 2х2 с помощью display: inline-block, но элементы почему-то съехали, хотя никаких отступов НЕТ. Прошу, пожалуйста помочь.