Как изменить ширину текстового блока?

Question

[Николай Васильев]

Имеется такой блок:

<p>
     Text here
      <img src="...."/>
     Text here
      <img src="...."/>
     Text here
      <img src="...."/>
     Text 
</p>

Проблема в том, что нужно выставить отступы именно для текста слева и справа, чтобы текст был уже картинок. Хозяин этой "верстки" не хочет менять разметку HTML поскольку текстовых блоков слишком много, поэтому вариант <span>Text here</span> не катит. Вопрос: можно ли с помощью CSS или JS изменить отступы для текста? Я нашел один вариант - :nth-child(odd), но тут есть нюанс - текст и картинки не всегда чередуются.

Comments

[Ankhena]

Задать padding, а картинкам отрицательный margin с соответствующей стороны.

Типа того: https://jsfiddle.net/smrgkceo/
Ширина задана для простоты примера.

Answer 1

[Сергей Попов]

Без смены разметки здесь не справиться. По правилам, в p тег лучше не встраивать блочные элементы.

Comments

[Андрей]

img - это строчный элемент

Answer 2

[Андрей]

Если хозяин верстки не хочет менять разметку по правильному, можно сделать по не-правильному и применить js)
В случае с jquery можно сделать чтото типа

$('p').contents().filter(function(){return this.nodeType === 3}).wrap('<span />');

ну, разумеется, селектор лучше подобрать получше, нежели p.

Либо, еще лучше, попросить того, кто пилит бэкенд, провернуть эту процедуру для тебя на бэке, в случае, если таковой имеется, так как скорее всего речь идет о части сайта непосредственно с контентом, забитым через какой-то wysywig