在图片前的内容上应用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

将图像和文本放入包装器中，将每个图像和文本放入另一个包装器中，就可以管理每个图像的边距。