在图像之前将css边距应用于内容

Question

我有文字内容和图片混合，想要在图像之前和之后直接对元素应用css边距（

，可以在图像之前或之后，但我无法控制哪一个和之后其中）

我使用以下代码将隐藏应用于图像之前的元素

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

问题是它将margin-top添加到其他图像中（我希望它适用于除图像之外的所有元素）并且我想在图像之后添加类似于影响内容元素

#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"); 

Here is an updated fiddle实例中的一个例子。如果有帮助，请告诉我。

Answer 2

将图像和文本放在包装中，将每个图像和文本放在另一个包装中，然后管理每个图像的边距。