Skip to main content

Spacing

This provides styles for removing the space around an element when it's inside another element that has one of the spacing classes.

You can remove the top margin and padding from the first child within an element.

Or you can remove the bottom margin and padding from the last child within an element.

This is useful when you have an element that could contain user content, but you want to ensure the spacing within the element. For example, you want to ensure that a paragraph at the end will not have a bottom margin or padding.

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/spacing/spacing.css';

See Import Cacao CSS for more information.

Example usage​

Here is an example of using this remove the padding and margin from the first and last child in an element.

<div class="first-child-st-0 last-child-sb-0">
    <h1>Content here</h1>
    <p>Some paragraph content.</p>
</div>

Here is an example where just the first child is affected.

<div class="first-child-st-0 ">
    <h1>Content here</h1>
    <p>Some paragraph content.</p>
</div>

Here is an example where just the last child is affected.

<div class="last-child-sb-0">
    <h1>Content here</h1>
    <p>Some paragraph content.</p>
</div>

Source CSS​

spacing/spacing.css
/* =========================================================================== *\
    Spacing utilities
\* =========================================================================== */

/* Used to remove space from the first element within an element. "st" stands for "space-top" */
.first-child-st-0 > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Used to remove space from the last element within an element "sb" stands for "space-bottom" */
.last-child-sb-0 > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}