Search code examples
cssimagemargin

Add a margin for all images without link inside a post content

I would like to add a margin for all images without link inside a post content .

.post-content img (here I need to target only the images whith no link) {
margin: 1em;
}

All images with a link must keep its own margin.

Do you please have a CSS or even javascript solution?

Cheers

Solution

  • If <img> is child of <div class="post-content"> you can use this code.

    .post-content > img {
  margin: 1em;
}

    Because img is in the first level of children.

    But if you have other wrappers, you can use this code to add margin to images without link, and then reset the margin of images with link.

    .post-content img {
  margin: 1em;
}

.post-content a > img {
  margin: 0; /* Or the original margin */
}