У меня проблемы со структурой HTML

Question

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

Я попытался поместить тег div с классом caja-img, который содержит определенную ширину.

HTML

<div class="col-md">
    <div class="contenido">
        <div class="caja-img">
            <img src="img/icon1.png" alt="Autogestion">
        </div>
        <h3 class='text-center'>Facil y seguro!</h3>
    </div>
</div>

CSS

.caja-img {
    background-color: red;  
 }

Вместо того, чтобы раскрашивать все строки, я просто хочу раскрасить изображение.

Answer 1

Вы можете установить элемент с классом .caja-img в display: inline-block.

См. Пример кода ниже:

.caja-img {
  background-color: red;
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="contenido">
    <div class="caja-img">
      <img src="img/icon1.png" alt="Autogestion">
    </div>
    <h3 class='text-center'>Facil y seguro!</h3>
  </div>
</div>

Answer 2

Вы можете использовать все <img> теги в вашем <div>.CSS будет выглядеть следующим образом:

.caja-img img{
    background-color: red;  
}

То, что он делает, это стилизация всех элементов img внутри .caja-img.