Tachyons Layout Spacing is used to specify the space between elements. Your website will look good when you use spacing between the elements. Mainly there are two types of spacing:
- padding: It is used to create space around an element’s content, inside of any defined borders.
- margin: It is used to create space around elements, outside of any defined borders.
Syntax:
<element-name class="class-name">...</element-name>
Tachyons Layout Spacing Classes:
From all sides:
- pa1 – pa7: This attribute is used to provide padding from all sides with the value of 1 to 7.
- ma1 – ma7: This attribute is used to provide a margin from all sides with the value of 1 to 7.
From top:
- pt0 – pt7: This attribute is used to provide padding from the top sides with the value of 0 to 7.
- mt0 – mt7: This attribute is used to provide a margin from the top sides with the value of 0 to 7.
From bottom:
- pb0 – pb7: This attribute is used to provide padding from the bottom sides with the value of 0 to 7.
- mb0 – mb7: This attribute is used to provide a margin from the bottom sides with the value of 0 to 7.
From Left:
- pl0 – pl7: This attribute is used to provide padding from the left sides with the value of 0 to 7.
- ml0 – ml7: This attribute is used to provide a margin from left sides with the value of 0 to 7.
From Right:
- pr0 – pr7: This attribute is used to provide padding from the right sides with the value of 0 to 7.
- mr0 – mr7: This attribute is used to provide a margin from the right sides with the value of 0 to 7.
Horizontal spacing:
- ph0 – ph7: This attribute is used to provide padding from horizontal sides with the value of 0 to 7.
- mh0 – mh7: This attribute is used to provide a margin from horizontal sides with the value of 0 to 7.
Vertical spacing:
- pv0 – pv7: This attribute is used to provide padding from vertical sides with the value of 0 to 7.
- mv0 – mv7: This attribute is used to provide a margin from vertical sides with the value of 0 to 7.
Example 1: In the below example we have used the “pa” class that will create padding from all sides.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
href=
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
border: 2px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="pa1">GFG</div><br>
<div class="pa2">GFG</div><br>
<div class="pa3">GFG</div><br>
<div class="pa4">GFG</div><br>
<div class="pa5">GFG</div><br>
<div class="pa6">GFG</div><br>
</body>
</html>
|
Output:
Example 2: In the below example we have used the “ma” class that will create margin from all sides.
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
href=
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
border: 2px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="ma1">GFG</div><br>
<div class="ma2">GFG</div><br>
<div class="ma3">GFG</div><br>
<div class="ma4">GFG</div><br>
<div class="ma5">GFG</div><br>
<div class="ma6">GFG</div><br>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/layout/spacing/