Spacing utilities

Halfmoon comes with responsive utility classes which can be used to set the margin and padding of elements.

Notation #

The class names for the spacing utilities come in the the following formats:

  • .{property}{sides}-{size}
  • .{property}{sides}-{breakpoint}-{size}

The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

Property

The {property} can be one of the following:

{property} Description
m Sets the margin property
p Sets the padding property

Sides

The {sides} can be one of the following:

{sides} Description
Blank Sets the margin or padding on all 4 sides of the element
t Sets the margin-top or padding-top
b Sets the margin-bottom or padding-bottom
l Sets the margin-left or padding-left
r Sets the margin-right or padding-right
x Sets the margin-left and margin-right, or padding-left and padding-right
y Sets the margin-top and margin-bottom, or padding-top and padding-bottom

Size

The {size} can be one of the following:

{size} Description
0 Sets the margin or padding to 0
5 Sets the margin or padding to 0.5rem (5px)
10 Sets the margin or padding to 1.0rem (10px)
15 Sets the margin or padding to 1.5rem (15px)
20 Sets the margin or padding to 2.0rem (20px)
auto Sets the margin to auto

Examples #

With all the said, the following table shows some examples of how the spacing utility classes can be used:

Classes Description
.m-0 margin: 0
.m-auto margin: auto
Horizontally center block and inline-block elements
.ml-auto margin-left: auto
Push elements to the right, see example (opens in new tab)
.m-sm-20 margin: 2rem (20px)
Only for small screens and up
.my-10 margin-top: 1rem (10px) and margin-bottom: 1rem (10px)
.p-10 padding: 1rem (10px)
.pt-5 padding-top: 0.5rem (5px)
.px-md-20 padding-left: 2rem (20px) and padding-right: 2rem (20px)
Only for medium screens and up

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.