Foundation CSS Prototyping Utilities Margin Helpers
Last Updated :
16 Mar, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilities Margin Helpers Classes in Foundation CSS.
In Foundation CSS, Prototyping Utilities Margin Helpers are used to create spacing all around the elements using various margin classes.
Foundation CSS Prototyping Utilities Margin Helpers classes:
- margin-[n]: This class is used to give margin to the element in all the 4 direction.
- margin-top-[n]: This class is used to give margin-top of the element.
- margin-bottom-[n]: This class is used to give margin-bottom of the element.
- margin-left-[n]: This class is used to give margin-left of the element.
- margin-right-[n]: This class is used to give margin-right of the element.
- margin-horizontal-[n]: This class is used to give margin in the horizontal direction of the element.
- margin-vertical-[n]: This class is used to give margin in the vertical direction of the element.
Note: Here [n] is a number and it can be 0, 1, 2, 3. It is relative units with respect to 8px, means 0 = 0px, 1= 8px, 2 = 16px and 3 = 24px.
Syntax:
<div class="Margin Helpers class">
..............
</div>
Example 1: Below is the example that illustrates the use of Prototyping Utilities Margin Helpers using margin-[n](0, 1, 2, 3) classes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Prototyping Utilities Margin Helpers</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
</head>
<body style="margin-inline: 10rem;">
<center>
<h2>GeeksforGeeks</h2>
<h3>Prototyping Utilities Margin Helpers</h3>
<div class="callout clearfix danger">
<div class="margin-0 callout">
0 margin all around
</div>
</div>
<div class="callout clearfix">
<div class="margin-1 callout">
8px margin all around
</div>
</div>
<div class="callout clearfix">
<div class="margin-2 callout">
16px margin all around
</div>
</div>
<div class="callout clearfix">
<div class="margin-3 callout">
24px margin all around
</div>
</div>
</center>
</body>
</html>
Output:
Foundation CSS Prototyping Utilities Margin Helpers
Example 2: Below is the example that illustrates the use of Prototyping Utilities Margin Helpers using margin-top-[n](0, 1, 2, 3) classes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Prototyping Utilities Margin Helpers</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
</head>
<body style="margin-inline: 10rem;">
<center>
<h2>GeeksforGeeks</h2>
<h3>Prototyping Utilities Margin Helpers</h3>
<div class="callout clearfix danger">
<div class="margin-top-0 callout">
0 margin-top all around
</div>
</div>
<div class="callout clearfix">
<div class="margin-top-1 callout">
8px margin-top all around
</div>
</div>
<div class="callout clearfix">
<div class="margin-top-2 callout">
16px margin-top all around
</div>
</div>
<div class="callout clearfix">
<div class="margin-top-3 callout">
24px margin-top all around
</div>
</div>
</center>
</body>
</html>
Output:
Foundation CSS Prototyping Utilities Margin Helpers
Example 3: Below is the example that illustrates the use of Prototyping Utilities Margin Helpers using margin-vertical-[n](0, 1, 2, 3) classes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Prototyping Utilities Margin Helpers</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-rtl.min.css"
crossorigin="anonymous">
</head>
<body style="margin-inline: 10rem;">
<center>
<h2>GeeksforGeeks</h2>
<h3>Prototyping Utilities Margin Helpers</h3>
<div class="callout clearfix danger">
<div class="margin-vertical-0 callout">
0 margin-vertical vertically
</div>
</div>
<div class="callout clearfix">
<div class="margin-vertical-1 callout">
8px margin-vertical vertically
</div>
</div>
<div class="callout clearfix">
<div class="margin-vertical-2 callout">
16px margin-vertical vertically
</div>
</div>
<div class="callout clearfix">
<div class="margin-vertical-3 callout">
24px margin-vertical vertically
</div>
</div>
</center>
</body>
</html>
Output:
Foundation CSS Prototyping Utilities Margin Helpers
Reference: https://get.foundation/sites/docs/prototyping-utilities.html#margin-helpers
Similar Reads
Foundation CSS Prototyping Utilities Padding Helpers
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
3 min read
Foundation CSS Prototyping Utilities Text Helpers
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
3 min read
Foundation CSS Prototyping Utilities
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Prototyping Utilities facilitate the building o
3 min read
Foundation CSS Prototyping Utilities Positioning
A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is
3 min read
Foundation CSS Prototyping Utilities Overflow
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
4 min read
Foundation CSS Prototyping Utilities List Styling
A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is
4 min read
Foundation CSS Prototyping Utilities Border None
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
2 min read
Foundation CSS Prototyping Utilities Sizing
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit
2 min read
Foundation CSS Prototyping Utilities Separator
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Foundation CSS Prototyping Utilities Border box
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
2 min read