Javascript 段落标记中仅CSS样式的文本

我有一页文本，它的格式与此类似

<div class="container">
    <p style="text-align: center;">
        <span style="text-decoration: underline;">
            <strong>
                <img src="//cdn.shopify.com/s/files/1/0652/9219/files/Horizontal.jpg?13817493546805475501" alt="">
            </strong>
        </span>
    </p>
    <p style="text-align: center;">
        <span style="text-decoration: underline;">
            <strong>The Hosting</strong>
        </span>
    </p>
    <p>
        The in-laws are arriving, friends are in town, and everyone is heading to your abode for a night filled with holiday cheer. As stress levels tend to rise during these events, expenses do as well. Here are a few tips to nail your hostess game, without breaking the bank and <em>still</em> shopping consciously. 
    </p>
</div>

主机


姻亲们来了，朋友们在城里，每个人都要去你的住处度过一个充满节日欢乐的夜晚。在这些活动中，压力水平往往会上升，因此支出也会上升。以下是一些技巧，可以让你在不破坏银行秩序的情况下，有意识地购物。

我希望使适合类容器整个内容宽度的图像保持不变，但只将段落标记中的文本更改为较小的宽度（因此它看起来在两侧缩进），或者具有边距，但根本不影响图像。我无法更改代码的输出方式，因此图像将始终包装在段落标记中

这段代码是内容页面上的一个小示例，有几个图像和文本贯穿其中

因此，基本上我正在寻找一种在css中只对段落标记中的实际文本进行样式设置的方法，并保持图像不变。任何帮助都会很好

---

这里有一个小例子：

如果您的html是静态的，或者如果您知道要修改哪个孩子，那么您可以简单地使用第n个孩子css选择器在示例代码中应用css，如下面第3个。您可以围绕利润率进行研究，看看什么最适合您的解决方案

p:nth-child(3) 
{
   margin: 0 50px; 
}

---

在不更改任何现有标记的情况下，您可以使用负边距完成所需的操作

类似这样的方法会奏效：

img {
  width: 120%; max-width: 120%;
  margin: 0 -10%;
}

.content > div, .content > p {
  margin: 0 10%;
}

---

您可以看到它在这把小提琴中工作：

是否有一些现有的CSS与之配套？知道已经准备好的东西会很有帮助。我会补充到原来的。不清楚你想要什么。你想让文本的边距比图片的边距大吗？用你的代码发布fiddle链接。添加了一个fiddle示例