Как сделать такой блок с картинкой?

Для создания блока с изображением в HTML можно использовать следующий код:

<div class="image-block">
    <img src="path/to/image.jpg" alt="Image description">
</div>

Где:

• <div> - блочный элемент, который используется для создания контейнера для других элементов. Мы используем его для создания обертки для изображения.
• class="image-block" - атрибут class, который помогает определить стиль элемента с помощью CSS. Вы можете использовать любое другое название класса вместо image-block.
• <img> - элемент для отображения изображения. Мы используем атрибуты src для указания пути к изображению и alt для описания изображения в случае, если оно не загрузится.

Чтобы придать стили этому блоку, вы можете использовать CSS. Например, чтобы добавить отступы и рамку вокруг изображения, можно использовать следующий CSS код:

.image-block {
    padding: 10px;
    border: 1px solid #ccc;
}

.image-block img {
    max-width: 100%;
    height: auto;
    display: block;
}

Где:

• padding - добавляет отступы вокруг содержимого блока.
• border - добавляет рамку вокруг блока.
• max-width: 100% - делает изображение адаптивным по ширине.
• height: auto - позволяет автоматически регулировать высоту изображения.
• display: block - делает изображение блочным элементом для корректного отображения.

Таким образом, вы создадите блок с изображением, который будет иметь отступы и рамку, а само изображение будет адаптивным и корректно отображаться на странице.