CSS conditional margin with (CSS only, no JS)

Question

Problem Description

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:

.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

<img class="alignleft" src="https://via.placeholder.com/350x150" alt="" />
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</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:

.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

just in case, here's the issue:

Since it has margin:0, the image has no space above. Obviously, I could add margin:15px and be a happy camper, but then I'd have a 15px space above the image when it is the first element.

I tried using .alignleft:not(:first-line) but it didn't work, not even adding the image inside the p tag, so I'm out of ideas

The Question

So, basically, my question is: is it possible to make these margins behave in a conditional way?

According to your code example, only the images within paragraphs, e.g. `p > img`, need top/right/bottom padding, while the other images just need right/bottom. https://jsfiddle.net/j08691/wadcro28/ . Or am I missing something? — j08691, Oct 08 '18 at 18:53
Possible duplicate of [Is there a CSS selector for the first child, taking text nodes into account?](https://stackoverflow.com/questions/42074295/is-there-a-css-selector-for-the-first-child-taking-text-nodes-into-account) — Maximillian Laumeister, Oct 08 '18 at 18:54
If it has to do with screen size look at css media stements. You could try ajusting line height. You could also use a class for img insde p element and another one fore img that are not inside the p element. — MadeInDreams, Oct 08 '18 at 18:59
@MaximillianLaumeister, how is this a duplicate? The other question is about inserting content in the middle of tags, (which I think is impossible and doesn't have an accepted answer). These are properly closed tags and there's no insertion in the middle whatsoever, kind of the exact opposite to that question — Devin, Oct 08 '18 at 18:59
@MadeInDreams, no, it's not related to screen sizes. The class part is possible, of course, but not really suitable. This is for a WP site and final users aren't computer savvy, so asking them to add a class is kind of a no go — Devin, Oct 08 '18 at 19:00
`.alignleft { margin-top: 0; } p .alignleft { margin-top: 15px; }` — connexo, Oct 08 '18 at 19:01
@connexo: while I made a mistake in my code (image shouldn't be inside of the p tag) WordPress tends to include images inside P tags, so this could work on quite some cases, thank you! :) — Devin, Oct 08 '18 at 19:03
@Devin This is my reasoning for it being a duplicate, and I may well be mistaken: You are trying to style an element (the image) based on whether a text node comes before it or it is the true first child. I am distinguishing this from the case in your question where the image is outside the `p` element, because otherwise you could just use a `p > img` selector to distinguish whether it's before a paragraph or inside a paragraph. If my possible duplicate was not valid, I expected you to comment and voters to read that before dupe voting, so no worries. — Maximillian Laumeister, Oct 08 '18 at 19:07
How should the image display if it's inside the `p`, but before all its text? Should it be different from the case when it's before `p`? — Ilya Streltsyn, Oct 08 '18 at 19:17

score 2 · Accepted Answer · answered Oct 08 '18 at 19:03

As per your HTML, apply the margin-top: 15px only when the img is a child (or following sibling) of the p.

.alignleft {
  float: left;
  margin: 0px 15px 15px 0;
}

p > .alignleft {
  margin-top: 15px;
}

/* if the img is a following sibling, try this:

  p ~ .alignleft { margin-top: 15px }

*/

<img class="alignleft" src="https://via.placeholder.com/350x150" alt="" />
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>


<hr>
<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

score 1 · Answer 2 · answered Oct 08 '18 at 19:04

Try it this way!

p img {
  float: left;
  margin: 15px 15px 15px 0px;
}

img {
  float: left;
  margin: 0px 15px 15px 0px;
}

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <img class="alignleft" src="https://via.placeholder.com/350x150" alt="" /> <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation
  e plu commun paroles.</p>

<p>Li Europan lingues es membres del sam familie. <strong>Lor separat existentie es un myth.</strong> 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.
  <em>Omnicos directe al desirabilite de un nov lingua franca:</em> On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles.</p>

CSS conditional margin with (CSS only, no JS)

Problem Description

The Question

2 Answers2