title: CSS conditional margin with (CSS only, no JS)
body: <h1>Problem Description</h1>
  <p>I have this (quite common) problem. If I float an image, I can give margins to it so it wraps around the image with some space. So, if I do this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alignleft {
    float: left;
    margin: 0 15px 15px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /&gt;
  &lt;p&gt;Li Europan lingues es membres del sam familie. &lt;strong&gt;Lor separat existentie es un myth.&lt;/strong&gt; Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
    &lt;em&gt;Omnicos directe al desirabilite de un nov lingua franca:&lt;/em&gt; On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.&lt;/p&gt;
  &lt;p&gt;Li Europan lingues es membres del sam familie. &lt;strong&gt;Lor separat existentie es un myth.&lt;/strong&gt; Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
    &lt;em&gt;Omnicos directe al desirabilite de un nov lingua franca:&lt;/em&gt; On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>And it works fine, of course.... as long as the image is at the top of the element. But if I add it in the middle of the text, this is what will happen:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alignleft {
    float: left;
    margin: 0 15px 15px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Li Europan lingues es membres del sam familie. &lt;strong&gt;Lor separat existentie es un myth.&lt;/strong&gt; Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
    &lt;img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /&gt; &lt;em&gt;Omnicos directe al desirabilite de un nov lingua franca:&lt;/em&gt; On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
    e plu commun paroles.&lt;/p&gt;
  
  &lt;p&gt;Li Europan lingues es membres del sam familie. &lt;strong&gt;Lor separat existentie es un myth.&lt;/strong&gt; Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
    &lt;em&gt;Omnicos directe al desirabilite de un nov lingua franca:&lt;/em&gt; On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>just in case, here's the issue:</p>
  <p><a href="https://i.stack.imgur.com/qUEIn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qUEIn.png" alt="enter image description here" /></a></p>
  <p>Since it has <code>margin:0</code>, the image has no space above. Obviously, I could add <code>margin:15px</code> and be a happy camper, but then I'd have a 15px space above the image when it is the first element.</p>
  <p>I tried using <code>.alignleft:not(:first-line)</code> but it didn't work, not even adding the image inside the <code>p</code> tag, so I'm out of ideas</p>
  <h1>The Question</h1>
  <p>So, basically, my question is: is it possible to make these margins behave in a conditional way?</p>