Owl spacing
Vertical spacing between child elements
In some cases, where we don’t need
flex and gap to put vertical space between
elements inside a container, we can use
owl selectors. The class is set on the container and will be applied to any child element
that has a preceeeding sibling – :nth-child(n+2)
.
Class | Declaration |
---|---|
owlxs | margin-top: 0.25rem; |
owls | margin-top: 0.5rem; |
owlm | margin-top: 1rem; |
owll | margin-top: 2rem; |
owlxl | margin-top: 4rem; |
* + *
* + *
* + *
<div class="bg-gray2 pam">
<div class="owls bg-gray4">
<div class="bg-white tc pas">* + *</div>
<div class="bg-white tc pas">* + *</div>
<div class="bg-white tc pas">* + *</div>
</div>
</div>