Spacing 4 Style Guide

General Spacing Principles

At Utopia 4, we believe that spacing is not just about aesthetics, but about functionality. That's why our style guide is dedicated to helping you understand the intricacies of our spacing system.

Horizontal Spacing

We use a combination of margin and padding to create a harmonious balance between elements.

For example:

margin-bottom: 20px;

This creates a 20px margin between the element and the next element, allowing for a smooth and cohesive user experience.

Vertical Spacing

We use a mix of line-height and vertical-align to create a visually appealing and readable content area.

For instance:

line-height: 1.5;

This sets the line-height to 1.5, creating a more open and airy feel to our content.

Want to learn more about our line-height system? Read on.

Need to know more about our grid system? Check it out.

Or, if you're feeling adventurous, why not explore our color palette?

Spacing in Action

Here's an example of our spacing in action:

Element 1

Element 2

Element 3

Conclusion