mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 17:36:46 +00:00
11 KiB
11 KiB
export const meta = { title: 'Spacing / Layout / Docs / TACHYONS', subNav: 'layout', modules: ['tachyons-spacing'], editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/layout/spacing.md' }
Spacing
Spacing comes in two flavors. Depending on borders and background colors, the difference between Margin and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.
Tachyons uses a spacing scale based on powers of two. The available values in the scale range from 0-7.
Good design is based on math. Certain patterns and ratios are so prevelant in nature and music that they can’t be denied as elegant design solutions. Even in the 18th century, pages in books were designed with ratios. In the 21st century, we have gotten away from this on the web, often using magic numbers to match a ‘spec’ that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren’t 100% accurate in their reflection of how the web works across device sizes or how things get drawn to the screen.
Tachyons features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since Tachyons uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time. As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren’t that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You’ll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.
Examples
Padding All
pa0, pa1, pa2, pa3, pa4, pa5, pa6, pa7
<div>
<div class="pa0 mb2 dib bg-black white">pa0</div>
</div>
<div>
<div class="pa1 mb2 dib bg-black white">pa1</div>
</div>
<div>
<div class="pa2 mb2 dib bg-black white">pa2</div>
</div>
<div>
<div class="pa3 mb2 dib bg-black white">pa3</div>
</div>
<div>
<div class="pa4 mb2 dib bg-black white">pa4</div>
</div>
<div>
<div class="pa5 mb2 dib bg-black white">pa5</div>
</div>
<div>
<div class="pa6 mb2 dib bg-black white">pa6</div>
</div>
<div>
<div class="pa7 mb2 dib bg-black white">pa7</div>
</div>
Padding Horizontal
<div>
<div class="ph0 mb2 dib bg-black white">ph0</div>
</div>
<div>
<div class="ph1 mb2 dib bg-black white">ph1</div>
</div>
<div>
<div class="ph2 mb2 dib bg-black white">ph2</div>
</div>
<div>
<div class="ph3 mb2 dib bg-black white">ph3</div>
</div>
<div>
<div class="ph4 mb2 dib bg-black white">ph4</div>
</div>
<div>
<div class="ph5 mb2 dib bg-black white">ph5</div>
</div>
<div>
<div class="ph6 mb2 dib bg-black white">ph6</div>
</div>
<div>
<div class="ph7 mb2 dib bg-black white">ph7</div>
</div>
Padding Vertical
<div>
<div class="pv0 mb2 dib bg-black white">pv0</div>
</div>
<div>
<div class="pv1 mb2 dib bg-black white">pv1</div>
</div>
<div>
<div class="pv2 mb2 dib bg-black white">pv2</div>
</div>
<div>
<div class="pv3 mb2 dib bg-black white">pv3</div>
</div>
<div>
<div class="pv4 mb2 dib bg-black white">pv4</div>
</div>
<div>
<div class="pv5 mb2 dib bg-black white">pv5</div>
</div>
<div>
<div class="pv6 mb2 dib bg-black white">pv6</div>
</div>
<div>
<div class="pv7 mb2 dib bg-black white">pv7</div>
</div>
Padding Left
<div>
<div class="pl0 mb2 dib bg-black white">pl0</div>
</div>
<div>
<div class="pl1 mb2 dib bg-black white">pl1</div>
</div>
<div>
<div class="pl2 mb2 dib bg-black white">pl2</div>
</div>
<div>
<div class="pl3 mb2 dib bg-black white">pl3</div>
</div>
<div>
<div class="pl4 mb2 dib bg-black white">pl4</div>
</div>
<div>
<div class="pl5 mb2 dib bg-black white">pl5</div>
</div>
<div>
<div class="pl6 mb2 dib bg-black white">pl6</div>
</div>
<div>
<div class="pl7 mb2 dib bg-black white">pl7</div>
</div>
Padding Right
<div>
<div class="pr0 mb2 dib bg-black white">pr0</div>
</div>
<div>
<div class="pr1 mb2 dib bg-black white">pr1</div>
</div>
<div>
<div class="pr2 mb2 dib bg-black white">pr2</div>
</div>
<div>
<div class="pr3 mb2 dib bg-black white">pr3</div>
</div>
<div>
<div class="pr4 mb2 dib bg-black white">pr4</div>
</div>
<div>
<div class="pr5 mb2 dib bg-black white">pr5</div>
</div>
<div>
<div class="pr6 mb2 dib bg-black white">pr6</div>
</div>
<div>
<div class="pr7 mb2 dib bg-black white">pr7</div>
</div>
Padding Top
<div>
<div class="pt0 mb2 dib bg-black white">pt0</div>
</div>
<div>
<div class="pt1 mb2 dib bg-black white">pt1</div>
</div>
<div>
<div class="pt2 mb2 dib bg-black white">pt2</div>
</div>
<div>
<div class="pt3 mb2 dib bg-black white">pt3</div>
</div>
<div>
<div class="pt4 mb2 dib bg-black white">pt4</div>
</div>
<div>
<div class="pt5 mb2 dib bg-black white">pt5</div>
</div>
<div>
<div class="pt6 mb2 dib bg-black white">pt6</div>
</div>
<div>
<div class="pt7 mb2 dib bg-black white">pt7</div>
</div>
Padding Bottom
<div>
<div class="pb0 mb2 dib bg-black white">pb0</div>
</div>
<div>
<div class="pb1 mb2 dib bg-black white">pb1</div>
</div>
<div>
<div class="pb2 mb2 dib bg-black white">pb2</div>
</div>
<div>
<div class="pb3 mb2 dib bg-black white">pb3</div>
</div>
<div>
<div class="pb4 mb2 dib bg-black white">pb4</div>
</div>
<div>
<div class="pb5 mb2 dib bg-black white">pb5</div>
</div>
<div>
<div class="pb6 mb2 dib bg-black white">pb6</div>
</div>
<div>
<div class="pb7 mb2 dib bg-black white">pb7</div>
</div>
Margin All
ma0, ma1, ma2, ma3, ma4, ma5, ma6, ma7
<div class="bg-black-10">
<div class="ma0 dib bg-black white">ma0</div>
</div>
<div class="bg-black-20">
<div class="ma1 dib bg-black white">ma1</div>
</div>
<div class="bg-black-30">
<div class="ma2 dib bg-black white">ma2</div>
</div>
<div class="bg-black-40">
<div class="ma3 dib bg-black white">ma3</div>
</div>
<div class="bg-black-50">
<div class="ma4 dib bg-black white">ma4</div>
</div>
<div class="bg-black-60">
<div class="ma5 dib bg-black white">ma5</div>
</div>
<div class="bg-black-70">
<div class="ma6 dib bg-black white">ma6</div>
</div>
<div class="bg-black-80">
<div class="ma7 dib bg-black white">ma7</div>
</div>
Margin Horizontal
<div class="bg-black-10">
<div class="mh0 dib bg-black white">mh0</div>
</div>
<div class="bg-black-20">
<div class="mh1 dib bg-black white">mh1</div>
</div>
<div class="bg-black-30">
<div class="mh2 dib bg-black white">mh2</div>
</div>
<div class="bg-black-40">
<div class="mh3 dib bg-black white">mh3</div>
</div>
<div class="bg-black-50">
<div class="mh4 dib bg-black white">mh4</div>
</div>
<div class="bg-black-60">
<div class="mh5 dib bg-black white">mh5</div>
</div>
<div class="bg-black-70">
<div class="mh6 dib bg-black white">mh6</div>
</div>
<div class="bg-black-80">
<div class="mh7 dib bg-black white">mh7</div>
</div>
Margin Vertical
<div class="bg-black-10">
<div class="mv0 dib bg-black white">mv0</div>
</div>
<div class="bg-black-20">
<div class="mv1 dib bg-black white">mv1</div>
</div>
<div class="bg-black-30">
<div class="mv2 dib bg-black white">mv2</div>
</div>
<div class="bg-black-40">
<div class="mv3 dib bg-black white">mv3</div>
</div>
<div class="bg-black-50">
<div class="mv4 dib bg-black white">mv4</div>
</div>
<div class="bg-black-60">
<div class="mv5 dib bg-black white">mv5</div>
</div>
<div class="bg-black-70">
<div class="mv6 dib bg-black white">mv6</div>
</div>
<div class="bg-black-80">
<div class="mv7 dib bg-black white">mv7</div>
</div>
Margin Left
<div class="bg-black-10">
<div class="ml0 dib bg-black white">ml0</div>
</div>
<div class="bg-black-20">
<div class="ml1 dib bg-black white">ml1</div>
</div>
<div class="bg-black-30">
<div class="ml2 dib bg-black white">ml2</div>
</div>
<div class="bg-black-40">
<div class="ml3 dib bg-black white">ml3</div>
</div>
<div class="bg-black-50">
<div class="ml4 dib bg-black white">ml4</div>
</div>
<div class="bg-black-60">
<div class="ml5 dib bg-black white">ml5</div>
</div>
<div class="bg-black-70">
<div class="ml6 dib bg-black white">ml6</div>
</div>
<div class="bg-black-80">
<div class="ml7 dib bg-black white">ml7</div>
</div>
Margin Right
<div class="bg-black-10">
<div class="mr0 dib bg-black white">mr0</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-20">
<div class="mr1 dib bg-black white">mr1</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-30">
<div class="mr2 dib bg-black white">mr2</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-40">
<div class="mr3 dib bg-black white">mr3</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-50">
<div class="mr4 dib bg-black white">mr4</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-60">
<div class="mr5 dib bg-black white">mr5</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-70">
<div class="mr6 dib bg-black white">mr6</div>
<div class="dib pa2 bg-black"></div>
</div>
<div class="bg-black-80">
<div class="mr7 dib bg-black white">mr7</div>
<div class="dib pa2 bg-black"></div>
</div>
Margin Top
<div class="bg-black-10">
<div class="mt0 dib bg-black white">mt0</div>
</div>
<div class="bg-black-20">
<div class="mt1 dib bg-black white">mt1</div>
</div>
<div class="bg-black-30">
<div class="mt2 dib bg-black white">mt2</div>
</div>
<div class="bg-black-40">
<div class="mt3 dib bg-black white">mt3</div>
</div>
<div class="bg-black-50">
<div class="mt4 dib bg-black white">mt4</div>
</div>
<div class="bg-black-60">
<div class="mt5 dib bg-black white">mt5</div>
</div>
<div class="bg-black-70">
<div class="mt6 dib bg-black white">mt6</div>
</div>
<div class="bg-black-80">
<div class="mt7 dib bg-black white">mt7</div>
</div>
Margin Bottom
<div class="bg-black-10">
<div class="mb0 dib bg-black white">mb0</div>
</div>
<div class="bg-black-20">
<div class="mb1 dib bg-black white">mb1</div>
</div>
<div class="bg-black-30">
<div class="mb2 dib bg-black white">mb2</div>
</div>
<div class="bg-black-40">
<div class="mb3 dib bg-black white">mb3</div>
</div>
<div class="bg-black-50">
<div class="mb4 dib bg-black white">mb4</div>
</div>
<div class="bg-black-60">
<div class="mb5 dib bg-black white">mb5</div>
</div>
<div class="bg-black-70">
<div class="mb6 dib bg-black white">mb6</div>
</div>
<div class="bg-black-80">
<div class="mb7 dib bg-black white">mb7</div>
</div>