My content includes text and images in a mix, and I wish to add CSS margin to elements that appear directly before and after the images. Unfortunately, the placement of these elements can vary and is beyond my control.
The code snippet below demonstrates how I am currently applying margin to the elements preceding the image:
#single-pg * + img { margin-top: 75px; }The issue with this code is that it also adds the margin to other images (which I want to avoid). Additionally, I would like to achieve a similar effect for the content elements following the image:
#single-pg img + * { margin-bottom: 75px; }This is the HTML structure within Wordpress:
<div id="single-pg" >
<?php the_content(); ?>
</div>The final output could look like the example below, though the order may vary depending on the author:
<h2>Title</h2>
<image></image>
<image<</image>
<p>text</p>
<p>text</p>
<p>text</p>
<image<</image>