CSS class to add margin for all child elements

<div class="container space-kids">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  border: 2px solid white;
  padding: 12px;
  display: flex;
  width: 400px;
  .box {
    height: 50px;
    width: 50px;
  }
}

.space-kids {
  & > * {
    margin-right: 12px;
    &:last-child {
      margin-right: 0px;
    }
  }
}

Codepen

Update: css property gap works too. Thanks @afif for pointing it out. But other styles would work with universal selector

---

Thanks for reading 💙

Follow @codedrops.tech for more.

Instagram ● Twitter ● Facebook

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript

codedrops.tech

---

Projects
Note Box - A chrome extension to add notes/todos based on URL

File Ops - A VS Code extension to easily tag/alias files & quick switch between files

Comments

[Temani Afif]

you can use gap to do this: developer.mozilla.org/en-US/docs/W...

[Mehul Lakhanpal]

Thanks for pointing it out. But to add any other styles the universal selector would be better I guess. Anyways I'll just update the post.

[Temani Afif]

You no more need any selector, a simple gap:12px applied to the flexbox container will do the job.

[Mehul Lakhanpal]

Yes I know. Its works the same way with css grids. I am saying if you need to apply styles other than that wont work.