html - 在图像之前将 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一个实际的例子。让我知道这是否有帮助。