段落標記內僅CSS樣式的文本

Question

我有一頁文字，其格式與此相似

<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中尋找一種方法來僅對段落標簽中的實際文本設置樣式，並使圖像保持不變。 任何幫助都會很棒。

這是一個小提琴示例： https : //jsfiddle.net/jpautt8v/

Answer 1

如果您的html是靜態的，或者您知道要修改的子代，則可以在示例代碼案例中簡單地使用第n個子代css選擇器來應用css，例如第3個以下。 您可以利用邊際利潤，看看哪種方法最適合您的解決方案。

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

Answer 2

無需更改任何現有標記，就可以使用負邊距完成所需的操作。

這樣的事情會起作用：

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

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

您可以看到它在此提琴中起作用： https : //jsfiddle.net/igor_9000/jpautt8v/1/