Documentation
Documentation - Spacing.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Spacing
Marssel allows you to manage the margins and paddings of your elements with an intuitive syntax. Use the classes m- for margins and p- for paddings, followed by the value in square brackets. Properties support standard CSS units (px, rem, em, %) and can be combined with breakpoints for responsive design.
Margin
<!-- Uniform margin -->
<div class="m-[20px]">20px margin everywhere</div>
<div class="m-[2rem]">Margin of 2rem everywhere</div>
<!-- Individual margins -->
<div class="mt-[10px]">Top margin</div>
<div class="mr-[15px]">Margin right</div>
<div class="mb-[20px]">Bottom margin</div>
<div class="ml-[25px]">Margin left</div>
<!-- Horizontal margin (left + right) -->
<div class="mx-[30px]">Left and right margin</div>
<!-- Vertical margin (top + bottom) -->
<div class="my-[40px]">Top and bottom margin</div>
<!-- Negative margins -->
<div class="mt-[-10px]">Negative top margin</div>
<!-- Horizontal centering -->
<div class="mx-[auto]">Centered element</div>Pads
<!-- Uniform padding -->
<div class="p-[15px]">15px padding everywhere</div>
<div class="p-[1.5rem]">1.5rem padding throughout</div>
<!-- Individual paddings -->
<div class="pt-[10px]">Padding top</div>
<div class="pr-[15px]">Padding right</div>
<div class="pb-[20px]">Padding bottom</div>
<div class="pl-[25px]">Padding left</div>
<!-- Horizontal padding (left + right) -->
<div class="px-[20px]">Left and right padding</div>
<!-- Vertical padding (top + bottom) -->
<div class="py-[30px]">Top and bottom padding</div>Responsive spacing
<!-- Padding that changes depending on the breakpoint -->
<div class="p-[10px] md--p-[20px] lg--p-[30px]">
Adaptive padding
</div>
<!-- Responsive margin -->
<div class="m-[5px] sm--m-[10px] xl--m-[20px]">
Responsive margin
</div>
<!-- Combination of axes and breakpoints -->
<div class="px-[15px] md--px-[30px] py-[10px] lg--py-[40px]">
Complex spacing
</div>Compact syntax
<!-- Multiple spacings on one component -->
<div class="card---[p-[20px]+m-[10px]]">
20px padding and 10px margin
</div>
<!-- With breakpoints -->
<div class="md--box---[p-[30px]+mx-[auto]]">
Padding and centering on tablet
</div>Units available
<!-- Pixels -->
<div class="p-[16px]">Pixel padding</div>
<!-- Rem (recommended) -->
<div class="p-[1rem]">Rem padding</div>
<!-- Em (relative to font size) -->
<div class="p-[1.5em]">Padding 1.5em</div>
<!-- Percentage -->
<div class="p-[10%]">Padding 10%</div>
<!-- Viewport units -->
<div class="p-[5vh]">Padding 5vh</div>Practical examples
Card title
Content with appropriate margins
Title
Content
Element centered horizontally
<div class="card---[p-[24px]+m-[16px]+rounded-[8px]+bg-[f8f9fa]]">
<h4 class="mb-[12px]">Card title</h4>
<p class="mt-[8px]">Content with appropriate margins</p>
</div>
<div class="container---[px-[16px]+py-[32px]] md--px-[48px] lg--px-[96px]">
<div class="mb-[24px] lg--mb-[48px]">
<h4>Title</h4>
</div>
<div class="mt-[16px] md--mt-[32px]">
<p>Content</p>
</div>
</div>
<div class="box---[w-[300px]+mx-[auto]+mt-[50px]+bg-[lightblue]]">
Element centered horizontally
</div>Available properties
Property | Equivalent CSS | Description
-----------|------------------------------|---------------------------------
m | margin | Margin on all sides
mt | margin-top | Top margin
mr | margin-right | Right margin
mb | margin-bottom | Bottom margin
ml | margin-left | Left margin
mx | margin-left + margin-right | Horizontal margins
my | margin-top + margin-bottom | Vertical margins
p | padding | Padding on all sides
pt | padding-top | Upper padding
pr | padding-right | Right padding
pb | padding-bottom | Lower padding
pl | padding-left | Left padding
px | padding-left + padding-right | Horizontal paddings
py | padding-top + padding-bottom | Vertical paddings