Tachyons Layout Spacing
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/
Please Login to comment...