在圖片前的內容上應用CSS邊距

Question

我混合了文字內容和圖片，並想將CSS邊距直接應用於圖片前后的元素（

，可以在圖片之前或之后出現，但我無法控制圖片的哪個和位置）

我正在使用以下代碼將邊距應用於圖像之前的元素

#single-pg * + img { margin-top: 75px; }

問題是它也會在其他圖像上添加頁邊空白（我希望將其應用於除圖像之外的所有元素），並且我想在圖像之后添加類似內容以影響內容元素

#single-pg img + * { margin-bottom: 75px; }

html（WordPress）

<div id="single-pg" >
    <?php the_content(); ?>
</div>

因此結果可能是（但也可能是基於作者的任何其他順序）

<h2>Title</h2>
<image></image>
<image<</image>
<p>text</p>
<p>text</p>
<p>text</p>
<image<</image>

Answer 1

您對問題的描述尚不完全清楚（而且很難看到您的標記）； 但是，如果您希望將margin-top和margin-bottom應用於除圖像之外的每個元素，則可以使用:not選擇器。

:not(img) {
    margin-top: 75px;
    margin-bottom: 75px;
}

編輯

為了更細致地定位段落，我們必須使用一些腳本。 我們可以使用相鄰的兄弟選擇器來添加我們的margin-top值：

img + p {
  margin-top:75px;
}

然后我們可以使用jQuery .prev()方法來定位每個圖像之前的段落：

$("img").prev().css("margin-bottom", "75px"); 

這是一個實際示例的更新小提琴 。 讓我知道是否有幫助。

Answer 2

將圖像和文本放入包裝器中，將每個圖像和文本放入另一個包裝器中，就可以管理每個圖像的邊距。