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/
Last Updated :
30 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...