Как применять CSS стили для picture?

Question

[CNC]

Ситуация такая, есть абстрактный тег picture:

<picture>   
   <source srcset="foo.webp">
   <img src="foo.jpg" alt="">
</picture>

Как правильно применять стили к картинке, указывать также стиль для source:

picture {
  source, img {
    height: 40px;
  }
}

Или же достаточно указать для img, а source рассматривать лишь как источник нужного изображения:

picture {
  img {
    height: 40px;
  }
}

Answer 1

[Арсений Матыцин]

1. source — «невидимый» узел. Его вообще трогать не надо.
2. picture тоже не выступает в роли ощутимого физического объекта. Он инлайновый, как и пикча.
3. img же подчиняется напрямую родителю, как если бы picture не было.

Чтобы это понять, достаточно просто взять и собрать демонстрацию.

4. Но все меняется, если начать использовать picture, как блончый, добавив ему display:block;