CSS class to add margin for all child elements

#css #webdev #codenewbie #codepen

<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