Как убрать паддинг только у того абзаца, внутри которого есть изображение?

Question

[suhuxa1]

Сабж. Есть такой код:

<p>Текст</p>
<p>fdsfsdf</p>
<p><img src="" ></p>
<p>fdsf</p>

Всем параграфам стоит паддинг 20. Но тому абзацу, внутри которого есть изображение - паддинг задавать не нужно. Как это выразить на чистом css?
Спасибо!

Comments

[Astrohas]

там только изображение? других элементов не будет ?

[suhuxa1]

Astrohas, нет, только изображение.

[spike__x]

suhuxa1, а нет возможности что ли указывать этим p с изображениями класс?

Answer 1

[dom1n1k]

Класс нужно задавать таким параграфам. Это единственно правильное решение. Всё стальное либо не сработает, либо будет оверкил.

Answer 2

[Astrohas]

var ps = document.querySelectorAll("p");
for (var p of ps){

  console.log(p)
  image = p.querySelector("img");
  if (image){
      p.style = "padding: 0"
  }
}

Comments

[suhuxa1]

Да, на jquery я написал в пару строк. Только не хотелось js подключать. Средствами css вообще никак?

[Игорь]

suhuxa1, зачем jquery
вот вам джс, засуньте в скрипт и будет радость, а если принципиально то переделайте немного вопрос, указав это там

[Astrohas]

suhuxa1, ну можете еще и отрицательные маргины для p>img приписать, но уж лучше через js

Answer 3

[Aleksey Solovyev]

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Задайте всем padding, а картинки на этот паддинг сдвиньте назад транформом или чем угодно...

Comments

[Игорь]

https://caniuse.com/#search=%3Ahas - рановато ещё, но согласен свойство полезное

Answer 4

[Артём Лучников]

а что мешает задать какой-нибудь класс параграфу, в котором лежит картинка и написать например так:
p:not(.not-pad) {padding: 20px;}
Пример

Answer 5

[maxsnw]

так задай класс параграфам с картинками и отруби
p.image-inside {
padding: 0;
}

либо засунь текст внутри параграфов в спаны, дай им инлайн-блок, и задай марджины, а у имейджа не задавай.