# CSS adding margin to all children

Sometime I want to add margin to all children in case that they get stacked on mobile devices. It would be nice if I have a utility CSS that does the job and can be applied to a parent element. 

```css
.children-mb-1 > * {
  margin-bottom: 0.25rem !important;
}
.children-mb-2 > * {
  margin-bottom: 0.5rem !important;
}
.children-mb-3 > * {
  margin-bottom: 1rem !important;
}
.children-mb-4 > * {
  margin-bottom: 1.5rem !important;
}
.children-mb-5 > * {
  margin-bottom: 3rem !important;
}
```

I adopted values from [Bootstrap](https://github.com/twbs/bootstrap/blob/6b6db4fd8a9aa79d99982c6cdc9a3dc3c78e4c6d/dist/css/bootstrap-grid.css#L1708-L1726) because I like it.

That's it.