Задать внутренний отступ, как на скрине?

Question

Подскажите, как можно задать внутренний отступ, как ниже на скрине?

Т.е., чтобы padding затронул только текст, а картинка осталась на весь блок. Возможно-ли это сделать без дополнительных оберток и без position: absolute для картинки?

<article class="articles">
    <a class="latestArticleItemLink" href="#">
        <span class="latestArticleItemName">
            Natural care for healthy facial skin
        </span>
        <img class="latestArticleImage" src="img/latestArticle-3.png">
        <span class="latestArticleDescription">
            A healthy lifestyle should start from now and also for your skin health. There are some...
        </span>
        <span class="">
            Read more
        </span>
    </a>
</article>

Answer 1

сделал, как посоветовали в коментах, дал падинги для спанов. Просто думал, что можно это сделать, как-то более, так сказать, элегантно

Answer 2

Более элегантный способ,это дать всему этому контенту,где находятся спаны,еще один див. И уже этому диву дать паддинги,а не каждому отдельному спану. В этом случае,даже если вы будите добавлять еще текст или какие либо другие ссылки, вам не нужно будет давать им так же отдельные паддинги,они всегда будут сохраняться у дива,общего родителя.

.articles-inner{
  padding:20px;
}

<article class="articles">
    <a class="latestArticleItemLink" href="#">
        <span class="latestArticleItemName">
            Natural care for healthy facial skin
        </span>
        <img class="latestArticleImage" src="img/latestArticle-3.png">
        <div class="articles-inner">
        <span class="latestArticleDescription">
            A healthy lifestyle should start from now and also for your skin health. There are some...
        </span>
        <span class="">
            Read more
        </span>
        </div>
    </a>
</article>

padding:20px; означает что со всех сторон,внутри контейнера, будут отступы в 20. Вы так же можете задать контертные padding-left, padding-right и тд,в зависимости от того,какие отступы в макете.

БЛОГ НА HUSL

Задать внутренний отступ, как на скрине?

Ответы (2 шт):